/* SetFile — tokens.css
   Design tokens, heredados tal cual del sistema ya validado en el sitio de
   SetGantt (misma dirección visual, a petición de Nico). Todos los colores
   funcionales están centralizados aquí como variables CSS semánticas — nada
   fuera de este fichero debe usar un color en crudo. */

:root {
  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-size-root: 16px;
  --line-height-tight: 1.15;
  --line-height-normal: 1.55;

  --fs-h1: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-h4: 1.05rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;
  --fs-tiny: 0.75rem;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-padding: var(--space-5);
  --header-height: 72px;

  /* ---- Radii & shadow shape ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-theme: 200ms ease;

  /* ---- Light theme (default) ---- */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f7fb;
  --color-surface-tinted: #eef3fb;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  --color-text-primary: #101828;
  --color-text-secondary: #475467;
  --color-text-muted: #667085;
  --color-text-on-accent: #ffffff;

  /* Azul de marca sustituido a petición de Nico: el #079CDF anterior no
     convencía (perdía vistosidad al oscurecerlo para AA). Nuevo origen:
     azul de los iconos de carpeta de macOS Finder, muestreado por código
     (PIL) directamente sobre el color de relleno plano del icono —
     #1597d6. Igual que antes, en claro hace falta oscurecerlo un poco
     para cumplir AA como texto/enlace sobre blanco (el tono puro solo da
     3.27:1); en oscuro el tono puro ya cumple de sobra y se usa tal cual
     más abajo. */
  --color-accent: #1179ab; /* #1597d6 oscurecido — 4.83:1 sobre blanco */
  --color-accent-hover: #0f6a96; /* 5.96:1 sobre blanco */
  --color-accent-soft: #f2f7fa;
  --color-accent-border: #add7eb;

  --color-focus-ring: #1179ab;

  /* Solid-fill backgrounds that carry white text (primary button, skip
     link) — kept as their own token, separate from --color-accent, because
     the two roles need different contrast targets and one color can't
     satisfy both at once in the dark theme (see the dark-theme override
     below and PENDING.md → Paso 6). In light theme these are identical to
     --color-accent/--color-accent-hover, so nothing changes visually here. */
  --color-cta-bg: #1179ab;
  --color-cta-bg-hover: #0f6a96;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.12);

  --placeholder-bg: var(--color-surface-alt);
  --placeholder-border: var(--color-border-strong);
  --placeholder-text: var(--color-text-muted);

  /* Dot inside the theme toggle when dark mode is active (i.e. the control
     that switches back to light). White reads as a plain "sun" without
     forcing an accent color onto a functional icon that has nothing to do
     with the brand's blue. */
  --color-theme-toggle-active-dot: #ffffff;

}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --color-bg: #0b1220;
  --color-surface: #111a2c;
  --color-surface-alt: #0e1626;
  --color-surface-tinted: #101b30;
  --color-border: #24304a;
  --color-border-strong: #34425f;

  --color-text-primary: #f2f4f8;
  --color-text-secondary: #b8c0d4;
  --color-text-muted: #8a93ab;
  --color-text-on-accent: #ffffff;

  /* Azul de carpeta de Finder muestreado (#1597d6), tal cual — en fondo
     oscuro da 5.73:1 de contraste como texto, de sobra por encima de AA
     (4.5:1), así que aquí sí se usa el tono puro sin oscurecer. El hover
     es el mismo tono aclarado (7.47:1), para que se note el cambio de
     estado sin perder legibilidad. */
  --color-accent: #1597d6;
  --color-accent-hover: #2faeeb;
  --color-accent-soft: #112731;
  --color-accent-border: #19658b;

  --color-focus-ring: #1597d6;

  /* Botón de relleno sólido con texto blanco: el propio --color-accent de
     este tema (#1597d6) solo da 3.27:1 para texto blanco encima — falla
     AA igual que en claro. Se reutiliza el mismo azul ya oscurecido para
     AA que usa el tema claro (#1179ab, 4.83:1), así el CTA es el mismo
     tono en los dos temas — mismo criterio que ya aplicaba este fichero
     antes de este cambio de marca. */
  --color-cta-bg: #1179ab;
  --color-cta-bg-hover: #0f6a96;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);

  --placeholder-bg: var(--color-surface-alt);
  --placeholder-border: var(--color-border-strong);
  --placeholder-text: var(--color-text-muted);
}