/* SetGantt — tokens.css
   Design tokens. All functional colors are centralized here as semantic CSS
   variables (per #10 §13). Nothing outside this file should hardcode a raw
   color value. Values are a first working proposal — not yet a closed brand
   decision (#06 §60-61: color/typography still pending final approval). */

: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;

  --color-accent: #2952e3;
  --color-accent-hover: #1f3fc0;
  --color-accent-soft: #e8edfd;
  --color-accent-border: #c3d0fa;

  --color-focus-ring: #2952e3;

  /* 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: var(--color-accent);
  --color-cta-bg-hover: var(--color-accent-hover);

  --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;

  --color-accent: #5b7cfa;
  --color-accent-hover: #799bff;
  /* WCAG AA fix (Paso 6): slightly darkened from the original #16213b —
     that value only gave 4.34:1 for --color-accent text sitting on top of
     it (active language pill, i18n-pending badges, step-number circles),
     just under the 4.5:1 AA floor for normal text. This tone (also happens
     to match --color-surface-tinted) clears it at 4.67:1 without changing
     any text color or visibly altering the "soft tinted chip" look. */
  --color-accent-soft: #101b30;
  --color-accent-border: #2c3c66;

  --color-focus-ring: #799bff;

  /* WCAG AA fix (Paso 6): the dark theme's own --color-accent (#5b7cfa) is
     tuned to read well as TEXT on a dark background (5.09:1), but that
     same value only gives 3.68:1 for white text ON it — fails AA's 4.5:1
     for normal-weight body-size text, which is exactly how the primary
     button/skip-link render (16px/600 weight, doesn't qualify as "large
     text"). --color-accent-hover (#799bff) is worse still (2.64:1), being
     an even lighter tone meant for text-hover, not a button-hover fill.
     Reusing the LIGHT theme's accent values here (deliberately not
     inventing new hexes) gives white text 6.16:1 / 8.3:1 — comfortably
     over AA — while staying the same recognizable brand blue. */
  --color-cta-bg: #2952e3;
  --color-cta-bg-hover: #1f3fc0;

  --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);
}