/* olloa design tokens — "Ink & Field" with Bauhaus type
 * Load once at the app root, before any component CSS.
 * Theme: follows the OS by default; force with <html data-theme="light|dark">.
 */

/* olloa (local change): fonts are self-hosted, not loaded from Google Fonts (ADR 0001, A03). */
@import url("./olloa-fonts.css");

:root {
  color-scheme: light;

  /* ---------- Color: surfaces & ink (light) ---------- */
  --olloa-bg:            #ECEEE9; /* Linen — page ground */
  --olloa-surface:       #F7F8F5; /* Page — cards, flashcard, inputs */
  --olloa-sunken:        #DDE1DA; /* chips, tracks, quiet fills */
  --olloa-border:        #D3D9D2; /* hairlines, secondary button borders */
  --olloa-ink:           #1F2A2E; /* primary text, monoline strokes, primary button */
  --olloa-ink-muted:     #59646A; /* secondary text (5.2:1 on bg) */
  --olloa-on-ink:        #F7F8F5; /* text on ink-filled controls */

  /* ---------- Color: fields (muted accents, illustration + categorisation) ---------- */
  --olloa-field:         #A3B19B; /* green — growth, review, streak */
  --olloa-stone:         #BDB3A2; /* warm neutral */
  --olloa-haze:          #9DB0BC; /* blue — new, knowledge */
  --olloa-rose:          #C6A39A; /* clay — learning, lapses */

  /* tints for count chips (ink text on top) */
  --olloa-chip-new:      #E0E7EB;
  --olloa-chip-learning: #EFE5E2;
  --olloa-chip-review:   #E3E8E0;

  /* ---------- Color: reward (the ONLY saturated colour) ---------- */
  --olloa-reward:        #F2B33D; /* Saffron — fills/shapes only */
  --olloa-reward-text:   #8A5A00; /* saffron-family text on light surfaces (5.5:1) */
  --olloa-on-reward:     #1F2A2E; /* text placed on a saffron fill */

  /* ---------- Color: feedback (non-reward) ---------- */
  --olloa-danger:        #9A3B2E; /* destructive text/borders */
  --olloa-focus:         #1F2A2E; /* focus ring */

  /* ---------- Games (Games.md): tile states; every state also has a mark ---------- */
  --olloa-tile-hit:      #A3B19B; /* right letter, right place (+ bottom bar mark) */
  --olloa-tile-near:     #9DB0BC; /* in the word, wrong place (+ corner dot mark) */
  --olloa-tile-miss:     #DDE1DA; /* not in the word (no mark, ink-muted letter) */
  --olloa-on-tile:       #1F2A2E; /* letters and marks on hit/near tiles */

  /* ---------- Heatmap / data ramp (field) ---------- */
  --olloa-ramp-0:        #DDE1DA;
  --olloa-ramp-1:        #C5CFC0;
  --olloa-ramp-2:        #A3B19B;
  --olloa-ramp-3:        #74826D;
  --olloa-ramp-4:        #4E5C49;

  /* ---------- Typography ---------- */
  --olloa-font-display:  "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --olloa-font-body:     "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;

  /* size / line-height / tracking / weight */
  --olloa-text-display-xl: 88px;  --olloa-lh-display-xl: 0.95; --olloa-tr-display-xl: -0.035em;
  --olloa-text-display-l:  54px;  --olloa-lh-display-l:  1.02; --olloa-tr-display-l:  -0.03em;
  --olloa-text-display-m:  33px;  --olloa-lh-display-m:  1.05; --olloa-tr-display-m:  -0.02em;
  --olloa-text-stat:       44px;  --olloa-lh-stat:       1;    --olloa-tr-stat:       -0.02em;
  --olloa-text-h1:         32px;  --olloa-lh-h1:         1.1;  --olloa-tr-h1:         -0.02em;
  --olloa-text-h2:         22px;  --olloa-lh-h2:         1.15; --olloa-tr-h2:         -0.015em;
  --olloa-text-h3:         17px;  --olloa-lh-h3:         1.15; --olloa-tr-h3:         -0.01em;
  --olloa-text-body-l:     18px;  --olloa-lh-body-l:     1.5;
  --olloa-text-body:       15px;  --olloa-lh-body:       1.5;
  --olloa-text-small:      13px;  --olloa-lh-small:      1.4;
  --olloa-text-caption:    12px;  --olloa-lh-caption:    1.35;
  --olloa-text-overline:   11px;  --olloa-tr-overline:   0.14em;

  --olloa-weight-prompt:   600; /* display text you are asked to recall */
  --olloa-weight-answer:   400; /* revealed answer / translation */
  --olloa-weight-body:     400;
  --olloa-weight-strong:   700;

  /* ---------- Space (4px base) ---------- */
  --olloa-space-1: 4px;  --olloa-space-2: 8px;   --olloa-space-3: 12px;
  --olloa-space-4: 16px; --olloa-space-5: 20px;  --olloa-space-6: 24px;
  --olloa-space-8: 32px; --olloa-space-10: 40px; --olloa-space-14: 56px;
  --olloa-space-16: 64px;

  /* ---------- Radius ---------- */
  --olloa-radius-chip:   999px;
  --olloa-radius-button: 12px;
  --olloa-radius-tile:   14px;
  --olloa-radius-card:   20px;
  --olloa-radius-card-l: 22px;

  /* ---------- Lines & elevation ---------- */
  --olloa-stroke:        3.5px; /* illustration stroke ≥ 64px */
  --olloa-stroke-s:      2.5px; /* illustration stroke < 64px */
  --olloa-hairline:      1px;
  --olloa-progress:      2px;   /* progress bars are hairlines */
  --olloa-shadow:        none;  /* no shadows; elevation = surface colour (+ border in dark) */

  /* ---------- Motion ---------- */
  --olloa-ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --olloa-ease-in-out:   cubic-bezier(0.6, 0, 0.3, 1);
  --olloa-dur-fast:      120ms; /* hover, press */
  --olloa-dur-base:      200ms; /* card flip, panel */
  --olloa-dur-reward:    240ms; /* reward sun scale-in */
  --olloa-dur-draw:      600ms; /* monoline draw-in */

  /* ---------- Layout ---------- */
  --olloa-container:     1200px;
  --olloa-gutter:        16px;  /* phone side gutter */
  --olloa-tap:           44px;  /* minimum touch target */
}

/* ---------- Dark (explicit) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --olloa-bg:            #141A1D;
  --olloa-surface:       #1D2529;
  --olloa-sunken:        #26323A;
  --olloa-border:        #2E3A3F;
  --olloa-ink:           #E4E9E6;
  --olloa-ink-muted:     #9AA6AA;
  --olloa-on-ink:        #141A1D;

  --olloa-field:         #74826D;
  --olloa-stone:         #8A8172;
  --olloa-haze:          #6E818D;
  --olloa-rose:          #957670;

  --olloa-chip-new:      #26323A;
  --olloa-chip-learning: #352C2A;
  --olloa-chip-review:   #28302A;

  --olloa-reward:        #F2B33D;
  --olloa-reward-text:   #F2B33D;
  --olloa-on-reward:     #1F2A2E;

  --olloa-danger:        #E59A8C;
  --olloa-focus:         #E4E9E6;

  --olloa-tile-hit:         #74826D;
  --olloa-tile-near:        #6E818D;
  --olloa-tile-miss:        #26323A;
  --olloa-on-tile:          #141A1D;

  --olloa-ramp-0:        #1D2529;
  --olloa-ramp-1:        #33402F;
  --olloa-ramp-2:        #4E5D48;
  --olloa-ramp-3:        #74826D;
  --olloa-ramp-4:        #A3B19B;
}

/* ---------- Dark (OS preference, unless forced light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --olloa-bg:            #141A1D;
    --olloa-surface:       #1D2529;
    --olloa-sunken:        #26323A;
    --olloa-border:        #2E3A3F;
    --olloa-ink:           #E4E9E6;
    --olloa-ink-muted:     #9AA6AA;
    --olloa-on-ink:        #141A1D;

    --olloa-field:         #74826D;
    --olloa-stone:         #8A8172;
    --olloa-haze:          #6E818D;
    --olloa-rose:          #957670;

    --olloa-chip-new:      #26323A;
    --olloa-chip-learning: #352C2A;
    --olloa-chip-review:   #28302A;

    --olloa-reward:        #F2B33D;
    --olloa-reward-text:   #F2B33D;
    --olloa-on-reward:     #1F2A2E;

    --olloa-danger:        #E59A8C;
    --olloa-focus:         #E4E9E6;

    --olloa-tile-hit:         #74826D;
    --olloa-tile-near:        #6E818D;
    --olloa-tile-miss:        #26323A;
    --olloa-on-tile:          #141A1D;

    --olloa-ramp-0:        #1D2529;
    --olloa-ramp-1:        #33402F;
    --olloa-ramp-2:        #4E5D48;
    --olloa-ramp-3:        #74826D;
    --olloa-ramp-4:        #A3B19B;
  }
}

/* ---------- Base ---------- */
html { background: var(--olloa-bg); }
body {
  margin: 0;
  background: var(--olloa-bg);
  color: var(--olloa-ink);
  font-family: var(--olloa-font-body);
  font-size: var(--olloa-text-body);
  line-height: var(--olloa-lh-body);
  -webkit-font-smoothing: antialiased;
}
:focus-visible {
  outline: 2px solid var(--olloa-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --olloa-dur-fast: 0ms;
    --olloa-dur-base: 0ms;
    --olloa-dur-reward: 0ms;
    --olloa-dur-draw: 0ms;
  }
}