/**
 * ============================================================================
 * JID.AGENCY — DESIGN SYSTEM TOKENS (BAUHAUS MINIMALIST & EDITORIAL)
 * Repository: https://github.com/JIDAgency/branding
 * CDN Direct: https://raw.githubusercontent.com/JIDAgency/branding/main/design-system/tokens.css
 * ============================================================================
 */

/* 1. TOKENS DE COLOR Y SUPERFICIES (DUAL THEME) */
:root,
[data-theme="light"] {
  /* Lienzos y Fondos */
  --color-canvas: #ffffff;
  --color-canvas-subtle: #fcfbf9;
  --color-card-surface: #f7f6f2;
  --color-surface-tonal: #f4f3ef;
  --color-surface-tonal-hover: #ebe9e3;
  --color-soft-wash: #f4f3ef;
  --color-mist: #ededed;

  /* Tipografía e Ink */
  --color-ink: #0a0a0a;
  --color-steel: #5f6368;
  --color-dimmed: #dbdbdb;
  --color-inverted-ink: #ffffff;
  --color-inverted-canvas: #0a0a0a;

  /* Separadores y Hairlines (Uso Estricto) */
  --color-hairline: #e3e2dc;
  --color-hairline-strong: #c8c6bc;

  /* Acentos de Marca JID */
  --color-accent-fuchsia: #c4187f;
  --color-accent-cyan: #078ba9;
  --color-accent: var(--color-accent-fuchsia);
  --color-accent-secondary: var(--color-accent-cyan);

  /* Acentos Primarios Bauhaus */
  --color-bauhaus-blue: #1430e6;
  --color-bauhaus-red: #e6392a;
  --color-bauhaus-amber: #e59800;

  /* Overlays & Scrims */
  --color-scrim: rgba(0, 0, 0, 0.45);
  --color-glass-header: rgba(255, 255, 255, 0.78);
  --color-glass-surface: rgba(255, 255, 255, 0.88);
}

[data-theme="dark"] {
  /* Lienzos y Fondos */
  --color-canvas: #0c0c0c;
  --color-canvas-subtle: #0a0a0a;
  --color-card-surface: #141414;
  --color-surface-tonal: #141414;
  --color-surface-tonal-hover: #1c1c1c;
  --color-soft-wash: #151515;
  --color-mist: #1a1a1a;

  /* Tipografía e Ink */
  --color-ink: #f5f5f5;
  --color-steel: #9aa0a6;
  --color-dimmed: #333333;
  --color-inverted-ink: #0a0a0a;
  --color-inverted-canvas: #f5f5f5;

  /* Separadores y Hairlines */
  --color-hairline: #222222;
  --color-hairline-strong: #333333;

  /* Acentos de Marca JID */
  --color-accent-fuchsia: #ff2a85;
  --color-accent-cyan: #00e5ff;
  --color-accent: var(--color-accent-fuchsia);
  --color-accent-secondary: var(--color-accent-cyan);

  /* Acentos Primarios Bauhaus */
  --color-bauhaus-blue: #3b5eff;
  --color-bauhaus-red: #ff4738;
  --color-bauhaus-amber: #ffb81c;

  /* Overlays & Scrims */
  --color-scrim: rgba(0, 0, 0, 0.65);
  --color-glass-header: rgba(12, 12, 12, 0.78);
  --color-glass-surface: rgba(20, 20, 20, 0.88);
}

/* 2. REGLAS ESTRUCTURALES Y RESTRICCIÓN DE SOMBRAS (ZERO SHADOW) */
*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 3. CLASES DE UTILIDAD TIPOGRÁFICA */
.font-editorial {
  font-family: 'Newsreader', Georgia, serif;
}

.font-editorial-italic {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
}

.font-grotesque {
  font-family: 'Plus Jakarta Sans', 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 4. COMPONENTES BASE BAUHAUS EDITORIAL */
/* Tarjeta Tonal Limpia Sin Bordes */
.editorial-card {
  background-color: var(--color-surface-tonal);
  border-radius: 14px;
  border: none;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.editorial-card:hover {
  background-color: var(--color-surface-tonal-hover);
}

/* Píldora / Badge Bauhaus */
.bauhaus-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background-color: var(--color-surface-tonal);
  color: var(--color-ink);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
}

/* Numeral Monumental Bauhaus */
.bauhaus-numeral {
  font-family: 'Plus Jakarta Sans', 'Sora', sans-serif;
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--color-ink);
}

/* Botón Primario Editorial */
.btn-editorial-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  background-color: var(--color-ink);
  color: var(--color-canvas);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-editorial-primary:hover {
  opacity: 0.9;
}

/* Botón Secundario Editorial Tonal */
.btn-editorial-tonal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  background-color: var(--color-surface-tonal);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  transition: background-color 0.2s ease;
}
.btn-editorial-tonal:hover {
  background-color: var(--color-surface-tonal-hover);
}