/*
 * Aquifer design system v0.2 -- tokens.
 *
 * Source of truth: Figma "ETEN x Aquifer" -> Foundations (node 508:1156).
 * Layering mirrors the Figma variables: primitive -> semantic -> component.
 * Components bind ONLY to the semantic layer (--aq-color-*); primitives exist
 * so the semantic layer (and the dark draft) can be remapped in one place.
 *
 * "Quiet by default. Color only when it means something." Cyan has exactly
 * three meanings: available (coverage fill), selected (ice tint), focused
 * (ring). Amber/red/green appear only in notices.
 */

:root {
  /* ---- Primitives: neutral ---- */
  --aq-n-0: #ffffff;
  --aq-n-25: #fafbfb;
  --aq-n-50: #f3f5f6;
  --aq-n-100: #e8ecee;
  --aq-n-200: #d8dee1;
  --aq-n-300: #bcc4c8;
  --aq-n-400: #868f94;
  --aq-n-500: #687378;
  --aq-n-600: #4f595e;
  --aq-n-700: #394246;
  --aq-n-800: #262e32;
  --aq-n-900: #192024;

  /* ---- Primitives: cyan ---- */
  --aq-cyan-50: #eef9fd;
  --aq-cyan-100: #d6f0fa;
  --aq-cyan-200: #a9e0f5;
  --aq-cyan-300: #6fcbee;
  --aq-cyan-400: #2db4e6;
  --aq-cyan-500: #00a3e0;
  --aq-cyan-600: #0090c7;
  --aq-cyan-700: #0a759f;
  --aq-cyan-800: #0b5c7c;
  --aq-cyan-900: #0a4259;

  /* ---- Primitives: tint (light blue-grey content surface; no near match among cyan/neutral) ---- */
  --aq-tint-100: #dee9ed;

  /* ---- Primitives: signals ---- */
  --aq-amber-50: #fff7e6;
  --aq-amber-200: #f5c76b;
  --aq-amber-800: #7a4d00;
  --aq-amber-900: #3d2a07;
  --aq-red-50: #fdf2f1;
  --aq-red-200: #f4a9a2;
  --aq-red-700: #b42318;
  --aq-red-900: #3b1512;
  --aq-green-50: #eff8f2;
  --aq-green-200: #98d5ae;
  --aq-green-700: #22703f;
  --aq-green-900: #11301d;

  /* ---- Primitives: dark (draft) ---- */
  --aq-dark-page: #12181b;
  --aq-dark-raised: #1a2226;
  --aq-dark-sunken: #0e1315;
  --aq-dark-border: #2a3338;
  --aq-dark-border-strong: #3a454b;
  --aq-dark-control: #6b777d;
  --aq-dark-text: #e9eef0;
  --aq-dark-text-2: #aeb8bc;
  --aq-dark-text-3: #8c989d;
  --aq-dark-cyan: #5fc3ea;
  --aq-dark-tint: #172228; /* PROVISIONAL: dark counterpart of tint/100 */

  /* ---- Motion (landing strata; not in Figma) ---- */
  --aq-motion-enter-duration: 400ms;
  --aq-motion-enter-distance: 8px;
  --aq-motion-enter-stagger: 60ms;
  --aq-motion-fast: 150ms;
  --aq-motion-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Semantic: color (light) ---- */
  --aq-color-surface-page: var(--aq-n-25);
  --aq-color-surface-raised: var(--aq-n-0);
  --aq-color-surface-sunken: var(--aq-n-50);
  --aq-color-surface-scrim: var(--aq-n-900); /* used at 40% opacity */
  --aq-color-surface-tint: var(--aq-tint-100); /* content area under the hero; the strata fade into it */

  --aq-color-text-primary: var(--aq-n-900);
  --aq-color-text-secondary: var(--aq-n-600);
  --aq-color-text-tertiary: var(--aq-n-500);
  --aq-color-text-inverse: var(--aq-n-0);

  --aq-color-action-primary: var(--aq-n-800);
  --aq-color-action-primary-hover: var(--aq-n-700);
  --aq-color-action-secondary-border: var(--aq-n-200);
  --aq-color-action-hover: var(--aq-n-50);
  --aq-color-action-disabled-bg: var(--aq-n-100);
  --aq-color-action-disabled-text: var(--aq-n-400);

  --aq-color-border-subtle: var(--aq-n-100);
  --aq-color-border-default: var(--aq-n-200);
  --aq-color-border-control: var(--aq-n-400);
  --aq-color-border-focus: var(--aq-cyan-700);
  --aq-color-border-brand: var(--aq-cyan-700); /* strata hairlines */

  --aq-color-coverage-filled: var(--aq-cyan-700);
  --aq-color-coverage-empty: var(--aq-n-100);
  --aq-color-coverage-empty-cell: var(--aq-n-50);
  --aq-color-coverage-label-on-filled: var(--aq-n-900);
  /* Book-completeness heat ramp (graded book cells): level 1 = barely started,
     8 = 100%. Light: the opaque cyan primitives 50-500 with dark ink, then 700
     and 800 with white ink. White takes over at the first step where it passes
     AA (cyan/700, 5.2:1; cyan/600 only reaches 3.6:1 with white and 4.6:1 with
     dark ink, so it is skipped rather than shown with the weaker dark label).
     Every pair is >= 4.5:1 (15.4, 13.9, 11.5, 9.0, 6.9, 5.7, 5.2, 7.4). */
  --aq-coverage-level-1-bg: var(--aq-cyan-50);  --aq-coverage-level-1-fg: var(--aq-color-text-primary);
  --aq-coverage-level-2-bg: var(--aq-cyan-100); --aq-coverage-level-2-fg: var(--aq-color-text-primary);
  --aq-coverage-level-3-bg: var(--aq-cyan-200); --aq-coverage-level-3-fg: var(--aq-color-text-primary);
  --aq-coverage-level-4-bg: var(--aq-cyan-300); --aq-coverage-level-4-fg: var(--aq-color-text-primary);
  --aq-coverage-level-5-bg: var(--aq-cyan-400); --aq-coverage-level-5-fg: var(--aq-color-text-primary);
  --aq-coverage-level-6-bg: var(--aq-cyan-500); --aq-coverage-level-6-fg: var(--aq-color-text-primary);
  --aq-coverage-level-7-bg: var(--aq-cyan-700); --aq-coverage-level-7-fg: var(--aq-color-text-inverse);
  --aq-coverage-level-8-bg: var(--aq-cyan-800); --aq-coverage-level-8-fg: var(--aq-color-text-inverse);

  --aq-color-selected-bg: var(--aq-cyan-50);
  --aq-color-selected-border: var(--aq-cyan-200);
  --aq-color-selected-text: var(--aq-cyan-800);
  --aq-color-text-brand: var(--aq-cyan-800); /* hero headline; "selected/text" means current choice, not brand */

  --aq-color-brand-mark: var(--aq-cyan-500);

  --aq-color-signal-warning-bg: var(--aq-amber-50);
  --aq-color-signal-warning-text: var(--aq-amber-800);
  --aq-color-signal-error-bg: var(--aq-red-50);
  --aq-color-signal-error-text: var(--aq-red-700);
  --aq-color-signal-success-bg: var(--aq-green-50);
  --aq-color-signal-success-text: var(--aq-green-700);

  /* ---- Elevation ---- */
  --aq-elevation-1: 0 1px 2px rgba(25, 32, 36, 0.06), 0 12px 32px rgba(25, 32, 36, 0.1); /* resting cards on tint, card hover, hero search */
  --aq-elevation-2: 0 20px 48px rgba(25, 32, 36, 0.14), 0 2px 6px rgba(25, 32, 36, 0.06); /* dialog */
  --aq-scrim-opacity: 0.4;

  /* ---- Type ---- */
  --aq-font-display: "Poppins", system-ui, sans-serif; /* Latin-script headings only */
  --aq-font-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --aq-font-data: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Space (4px base) ---- */
  --aq-space-1: 4px;
  --aq-space-2: 8px;
  --aq-space-3: 12px;
  --aq-space-4: 16px;
  --aq-space-5: 20px;
  --aq-space-6: 24px;
  --aq-space-8: 32px;
  --aq-space-12: 48px;
  --aq-space-16: 64px;
  --aq-space-24: 96px;

  /* ---- Radius ---- */
  --aq-radius-xs: 4px;
  --aq-radius-sm: 8px;
  --aq-radius-md: 12px;
  --aq-radius-lg: 16px;
  --aq-radius-full: 999px;

  /* ---- Layout: grid 12/8/4, margins 32/24/16, content max 1120 ---- */
  --aq-content-max: 1120px;
  --aq-page-margin: 32px;
  --aq-header-height: 60px;
}

@media (max-width: 1023px) { :root { --aq-page-margin: 24px; } }
@media (max-width: 599px) { :root { --aq-page-margin: 16px; } }

/*
 * Dark mode -- DRAFT (Figma marks it as a draft). Meaning stays the same;
 * only values remap. Applies when the OS prefers dark and the page hasn't
 * pinned light, or when the page pins dark.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --aq-color-surface-page: var(--aq-dark-page);
    --aq-color-surface-raised: var(--aq-dark-raised);
    --aq-color-surface-sunken: var(--aq-dark-sunken);
    --aq-color-surface-scrim: #000000;
    --aq-color-surface-tint: var(--aq-dark-tint);
    --aq-color-text-primary: var(--aq-dark-text);
    --aq-color-text-secondary: var(--aq-dark-text-2);
    --aq-color-text-tertiary: var(--aq-dark-text-3);
    --aq-color-text-inverse: var(--aq-dark-page);
    --aq-color-action-primary: var(--aq-dark-text);
    --aq-color-action-primary-hover: var(--aq-dark-text-2);
    --aq-color-action-secondary-border: var(--aq-dark-border-strong);
    --aq-color-action-hover: var(--aq-dark-border);
    --aq-color-action-disabled-bg: var(--aq-dark-border);
    --aq-color-action-disabled-text: var(--aq-dark-control);
    --aq-color-border-subtle: var(--aq-dark-border);
    --aq-color-border-default: var(--aq-dark-border-strong);
    --aq-color-border-control: var(--aq-dark-control);
    --aq-color-border-focus: var(--aq-dark-cyan);
    --aq-color-border-brand: var(--aq-dark-cyan);
    --aq-color-coverage-filled: var(--aq-dark-cyan);
    --aq-color-coverage-empty: var(--aq-dark-border);
    --aq-color-coverage-empty-cell: var(--aq-dark-sunken);
    --aq-color-coverage-label-on-filled: var(--aq-dark-page);
    /* Dark (DRAFT): cyan-300 at stepped opacity over surface/page, mixed to an
       opaque color so contrast holds on any backdrop. Opacities skip the
       50-65% band where neither ink reaches 4.5:1. Ratios: 12.6 .. 4.7 with
       light ink (levels 1-5), 5.4, 7.3, 9.8 with dark ink (6-8). */
    --aq-coverage-level-1-bg: color-mix(in srgb, var(--aq-cyan-300) 10%, var(--aq-color-surface-page)); --aq-coverage-level-1-fg: var(--aq-color-text-primary);
    --aq-coverage-level-2-bg: color-mix(in srgb, var(--aq-cyan-300) 20%, var(--aq-color-surface-page)); --aq-coverage-level-2-fg: var(--aq-color-text-primary);
    --aq-coverage-level-3-bg: color-mix(in srgb, var(--aq-cyan-300) 28%, var(--aq-color-surface-page)); --aq-coverage-level-3-fg: var(--aq-color-text-primary);
    --aq-coverage-level-4-bg: color-mix(in srgb, var(--aq-cyan-300) 38%, var(--aq-color-surface-page)); --aq-coverage-level-4-fg: var(--aq-color-text-primary);
    --aq-coverage-level-5-bg: color-mix(in srgb, var(--aq-cyan-300) 48%, var(--aq-color-surface-page)); --aq-coverage-level-5-fg: var(--aq-color-text-primary);
    --aq-coverage-level-6-bg: color-mix(in srgb, var(--aq-cyan-300) 70%, var(--aq-color-surface-page)); --aq-coverage-level-6-fg: var(--aq-color-text-inverse);
    --aq-coverage-level-7-bg: color-mix(in srgb, var(--aq-cyan-300) 85%, var(--aq-color-surface-page)); --aq-coverage-level-7-fg: var(--aq-color-text-inverse);
    --aq-coverage-level-8-bg: var(--aq-color-coverage-filled); --aq-coverage-level-8-fg: var(--aq-color-text-inverse);
    --aq-color-selected-bg: var(--aq-cyan-900);
    --aq-color-selected-border: var(--aq-cyan-800);
    --aq-color-selected-text: var(--aq-dark-cyan);
    --aq-color-text-brand: var(--aq-dark-cyan);
    --aq-color-signal-warning-bg: var(--aq-amber-900);
    --aq-color-signal-warning-text: var(--aq-amber-200);
    --aq-color-signal-error-bg: var(--aq-red-900);
    --aq-color-signal-error-text: var(--aq-red-200);
    --aq-color-signal-success-bg: var(--aq-green-900);
    --aq-color-signal-success-text: var(--aq-green-200);
    --aq-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    --aq-elevation-2: 0 20px 48px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --aq-scrim-opacity: 0.6;
  }
}
:root[data-theme="dark"] {
  --aq-color-surface-page: var(--aq-dark-page);
  --aq-color-surface-raised: var(--aq-dark-raised);
  --aq-color-surface-sunken: var(--aq-dark-sunken);
  --aq-color-surface-scrim: #000000;
  --aq-color-surface-tint: var(--aq-dark-tint);
  --aq-color-text-primary: var(--aq-dark-text);
  --aq-color-text-secondary: var(--aq-dark-text-2);
  --aq-color-text-tertiary: var(--aq-dark-text-3);
  --aq-color-text-inverse: var(--aq-dark-page);
  --aq-color-action-primary: var(--aq-dark-text);
  --aq-color-action-primary-hover: var(--aq-dark-text-2);
  --aq-color-action-secondary-border: var(--aq-dark-border-strong);
  --aq-color-action-hover: var(--aq-dark-border);
  --aq-color-action-disabled-bg: var(--aq-dark-border);
  --aq-color-action-disabled-text: var(--aq-dark-control);
  --aq-color-border-subtle: var(--aq-dark-border);
  --aq-color-border-default: var(--aq-dark-border-strong);
  --aq-color-border-control: var(--aq-dark-control);
  --aq-color-border-focus: var(--aq-dark-cyan);
  --aq-color-border-brand: var(--aq-dark-cyan);
  --aq-color-coverage-filled: var(--aq-dark-cyan);
  --aq-color-coverage-empty: var(--aq-dark-border);
  --aq-color-coverage-empty-cell: var(--aq-dark-sunken);
  --aq-color-coverage-label-on-filled: var(--aq-dark-page);
  /* Dark (DRAFT): cyan-300 at stepped opacity over surface/page, mixed to an
     opaque color so contrast holds on any backdrop. Opacities skip the
     50-65% band where neither ink reaches 4.5:1. Ratios: 12.6 .. 4.7 with
     light ink (levels 1-5), 5.4, 7.3, 9.8 with dark ink (6-8). */
  --aq-coverage-level-1-bg: color-mix(in srgb, var(--aq-cyan-300) 10%, var(--aq-color-surface-page)); --aq-coverage-level-1-fg: var(--aq-color-text-primary);
  --aq-coverage-level-2-bg: color-mix(in srgb, var(--aq-cyan-300) 20%, var(--aq-color-surface-page)); --aq-coverage-level-2-fg: var(--aq-color-text-primary);
  --aq-coverage-level-3-bg: color-mix(in srgb, var(--aq-cyan-300) 28%, var(--aq-color-surface-page)); --aq-coverage-level-3-fg: var(--aq-color-text-primary);
  --aq-coverage-level-4-bg: color-mix(in srgb, var(--aq-cyan-300) 38%, var(--aq-color-surface-page)); --aq-coverage-level-4-fg: var(--aq-color-text-primary);
  --aq-coverage-level-5-bg: color-mix(in srgb, var(--aq-cyan-300) 48%, var(--aq-color-surface-page)); --aq-coverage-level-5-fg: var(--aq-color-text-primary);
  --aq-coverage-level-6-bg: color-mix(in srgb, var(--aq-cyan-300) 70%, var(--aq-color-surface-page)); --aq-coverage-level-6-fg: var(--aq-color-text-inverse);
  --aq-coverage-level-7-bg: color-mix(in srgb, var(--aq-cyan-300) 85%, var(--aq-color-surface-page)); --aq-coverage-level-7-fg: var(--aq-color-text-inverse);
  --aq-coverage-level-8-bg: var(--aq-color-coverage-filled); --aq-coverage-level-8-fg: var(--aq-color-text-inverse);
  --aq-color-selected-bg: var(--aq-cyan-900);
  --aq-color-selected-border: var(--aq-cyan-800);
  --aq-color-selected-text: var(--aq-dark-cyan);
  --aq-color-text-brand: var(--aq-dark-cyan);
  --aq-color-signal-warning-bg: var(--aq-amber-900);
  --aq-color-signal-warning-text: var(--aq-amber-200);
  --aq-color-signal-error-bg: var(--aq-red-900);
  --aq-color-signal-error-text: var(--aq-red-200);
  --aq-color-signal-success-bg: var(--aq-green-900);
  --aq-color-signal-success-text: var(--aq-green-200);
  --aq-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --aq-elevation-2: 0 20px 48px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --aq-scrim-opacity: 0.6;
}

/*
 * Type styles (Figma text styles aq/*). Poppins 500 for Latin-script headings
 * only; Noto Sans 400/600 for everything people read; Roboto Mono for data.
 * Figma letter-spacing is in % of size: -2% -> -0.02em, overline 6% -> 0.06em.
 */
.aq-t-display        { font: 500 40px/48px var(--aq-font-display); letter-spacing: -0.02em; }
.aq-t-display-mobile { font: 500 30px/36px var(--aq-font-display); letter-spacing: -0.02em; }
.aq-t-title          { font: 500 28px/36px var(--aq-font-display); letter-spacing: -0.015em; }
.aq-t-title-mobile   { font: 500 24px/30px var(--aq-font-display); letter-spacing: -0.015em; }
.aq-t-heading        { font: 500 20px/28px var(--aq-font-display); letter-spacing: -0.01em; }
.aq-t-subheading     { font: 600 16px/24px var(--aq-font-body); }
.aq-t-body-l         { font: 400 17px/26px var(--aq-font-body); }
.aq-t-body           { font: 400 15px/24px var(--aq-font-body); }
.aq-t-small          { font: 400 13px/20px var(--aq-font-body); }
.aq-t-label          { font: 600 14px/20px var(--aq-font-body); }
.aq-t-label-sm       { font: 600 13px/18px var(--aq-font-body); }
.aq-t-overline       { font: 600 11px/16px var(--aq-font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.aq-t-data           { font: 400 12px/16px var(--aq-font-data); }

/*
 * Script stacks. Every language string carries lang + dir; these rules key off
 * it. Latin is the default; the selectors below name the non-Latin scripts
 * the corpus has (or plausibly will). Poppins never sets non-Latin headings,
 * overlines are uppercase in Latin only, Devanagari/Gujarati get 1.6.
 * TODO: Arabic/Farsi +10% leading and per-script Noto faces (Noto Sans
 * Arabic/Devanagari/SC/TC/Hebrew via unicode-range) are not wired yet.
 */
.aq-script-nonlatin,
:lang(ar), :lang(fa), :lang(ur), :lang(he), :lang(hi), :lang(gu), :lang(mr), :lang(ne),
:lang(zh), :lang(ja), :lang(ko), :lang(ru), :lang(uk), :lang(bg), :lang(el), :lang(am), :lang(th) {
  --aq-font-display: var(--aq-font-body);
}
:is(:lang(ru), :lang(uk), :lang(bg), :lang(el)) .aq-t-overline,
.aq-t-overline:is(:lang(ru), :lang(uk), :lang(bg), :lang(el)) { text-transform: none; letter-spacing: 0; }
:is(:lang(hi), :lang(gu), :lang(mr), :lang(ne)) { line-height: 1.6; }