/* Design tokens: the single source of truth for color, space, type, radius and
   elevation. Light is the default; dark overrides live in the media block and
   are also reachable via [data-theme] for the manual toggle.

   The legacy token names (--surface, --ink, --status-*, --radius) keep their
   EXACT previous values so nothing shifts visually. New scales are additive. */
:root {
  --surface: #fcfcfb;
  --page: #f9f9f7;
  --ink: #0b0b0b;
  --ink-secondary: #52514e;
  --muted: #898781;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;

  /* ---- Semantic color roles ----
     Primary is split into three roles because one hex cannot serve all three:

       --color-primary       text, borders, focus rings. Must clear WCAG AA
                             (4.5:1) against --surface and --page. It is
                             THEME-DEPENDENT: a blue dark enough to read on
                             white is too dark to read on near-black, so the
                             dark theme lightens it.
       --color-primary-solid background of solid controls that carry
                             --color-primary-fg (white) text. Fixed in both
                             themes so a filled button never inverts.
       --color-primary-fill  chart fills and background swatches, where no text
                             sits on top and the contrast minimum does not
                             apply. Kept at the original #2a78d6 so the data
                             visualizations are byte-identical to before.

     Measured (see M2 report): #1f6fd0 -> 4.82:1 on #fcfcfb, 4.70:1 on #f9f9f7.
     White on #1f6fd0 -> 4.95:1. Dark theme #6cabf2 -> 7.25:1 on #1a1a19. */
  --color-primary: #1f6fd0;
  --color-primary-solid: #1f6fd0;
  --color-primary-fill: #2a78d6;
  --color-primary-fg: #ffffff;
  --color-primary-subtle: #e7f0fb;

  --color-success: #0ca30c;
  --color-success-fg: #ffffff;
  --color-success-subtle: #e6f6e6;

  --color-warning: #fab219;
  --color-warning-fg: #0b0b0b;
  --color-warning-subtle: #fdf3e0;

  --color-danger: #d03b3b;
  --color-danger-fg: #ffffff;
  --color-danger-subtle: #fbeaea;

  --color-info: #0e9aa7;
  --color-info-fg: #ffffff;
  --color-info-subtle: #e4f4f6;

  --color-neutral: #898781;
  --color-neutral-fg: #ffffff;
  --color-neutral-subtle: #f0efec;

  /* Data-quality status colors — used ONLY in the Calidad de datos view,
     always paired with an icon + text label, never color alone.
     Kept as aliases of the semantic roles so existing CSS keeps working. */
  --status-good: var(--color-success);
  --status-warning: var(--color-warning);
  --status-serious: #ec835a;
  --status-critical: var(--color-danger);

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;

  /* ---- Typography scale ---- */
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.7rem;
  --text-3xl: 2.1rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.45;
  --leading-loose: 1.7;

  /* ---- Radius scale ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  /* Legacy alias: existing rules use var(--radius). */
  --radius: 10px;

  /* ---- Elevation: soft and subtle, never heavy ---- */
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05);
  --shadow-md: 0 2px 4px rgba(11, 11, 11, 0.05), 0 4px 12px rgba(11, 11, 11, 0.06);
  --shadow-lg: 0 4px 8px rgba(11, 11, 11, 0.06), 0 12px 32px rgba(11, 11, 11, 0.10);

  /* ---- Motion ---- */
  --motion-fast: 0.12s;
  --motion-base: 0.2s;
  --motion-shell: 0.18s;

  /* ---- Focus ---- */
  /* One ring for the whole app: same color as primary text, so it inherits the
     AA-compliant value in both themes. */
  --focus-ring-color: var(--color-primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);

  /* ---- App shell geometry ---- */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 60px;
  /* Minimum interactive size (pointer/touch). */
  --tap-target: 44px;

  /* ---- Data viz: sequential blue ramp (light -> dark), 13 stops.
     Magnitude only (9-box counts, report heatmap). Never good/bad colors.
     JS reads these via core/tokens.js so there is ONE source of truth. ---- */
  --viz-blue-1: #cde2fb;
  --viz-blue-2: #b7d3f6;
  --viz-blue-3: #9ec5f4;
  --viz-blue-4: #86b6ef;
  --viz-blue-5: #6da7ec;
  --viz-blue-6: #5598e7;
  --viz-blue-7: #3987e5;
  --viz-blue-8: #2a78d6;
  --viz-blue-9: #256abf;
  --viz-blue-10: #1c5cab;
  --viz-blue-11: #184f95;
  --viz-blue-12: #104281;
  --viz-blue-13: #0d366b;

  /* Categorical hues, in the mandated order. The first 7 are the competency
     palette; 8-16 extend it for the reports charts. */
  --viz-hue-1: #2a78d6;
  --viz-hue-2: #1baf7a;
  --viz-hue-3: #eda100;
  --viz-hue-4: #008300;
  --viz-hue-5: #4a3aa7;
  --viz-hue-6: #e34948;
  --viz-hue-7: #e87ba4;
  --viz-hue-8: #0e9aa7;
  --viz-hue-9: #e66a1f;
  --viz-hue-10: #6b4e71;
  --viz-hue-11: #b854ad;
  --viz-hue-12: #3a6186;
  --viz-hue-13: #c0852e;
  --viz-hue-14: #516e41;
  --viz-hue-15: #b0452c;
  --viz-hue-16: #7c528e;

  /* Ink used on top of a dark ramp shade / a light ramp shade. */
  --viz-ink-on-dark: #ffffff;
  --viz-ink-on-light: #0b0b0b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1a1a19;
    --page: #0d0d0d;
    --ink: #ffffff;
    --ink-secondary: #c3c2b7;
    --muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;

    /* The light-theme primary reads at 3.5:1 on #1a1a19 — below AA. Dark themes
       need the lighter end of the same hue. --color-primary-solid and
       --color-primary-fill deliberately do NOT move: a filled button and a
       chart series must look the same in both themes. */
    --color-primary: #6cabf2;

    --color-primary-subtle: #17263a;
    --color-success-subtle: #14261a;
    --color-warning-subtle: #2c2415;
    --color-danger-subtle: #2e1a1a;
    --color-info-subtle: #12262a;
    --color-neutral-subtle: #202020;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}

/* Explicit theme overrides win in both directions. */
:root[data-theme="light"] {
  --surface: #fcfcfb; --page: #f9f9f7; --ink: #0b0b0b;
  --ink-secondary: #52514e; --muted: #898781; --gridline: #e1e0d9; --baseline: #c3c2b7;

  --color-primary: #1f6fd0;
  --color-primary-subtle: #e7f0fb;
  --color-success-subtle: #e6f6e6;
  --color-warning-subtle: #fdf3e0;
  --color-danger-subtle: #fbeaea;
  --color-info-subtle: #e4f4f6;
  --color-neutral-subtle: #f0efec;

  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05);
  --shadow-md: 0 2px 4px rgba(11, 11, 11, 0.05), 0 4px 12px rgba(11, 11, 11, 0.06);
  --shadow-lg: 0 4px 8px rgba(11, 11, 11, 0.06), 0 12px 32px rgba(11, 11, 11, 0.10);
}
:root[data-theme="dark"] {
  --surface: #1a1a19; --page: #0d0d0d; --ink: #ffffff;
  --ink-secondary: #c3c2b7; --muted: #898781; --gridline: #2c2c2a; --baseline: #383835;

  --color-primary: #6cabf2;
  --color-primary-subtle: #17263a;
  --color-success-subtle: #14261a;
  --color-warning-subtle: #2c2415;
  --color-danger-subtle: #2e1a1a;
  --color-info-subtle: #12262a;
  --color-neutral-subtle: #202020;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.55);
}