/* ==========================================================================
   LearnTree design tokens — "Field Notebook"
   ==========================================================================

   Every colour, size and spacing value in the application is defined here and
   nowhere else. If you find a raw hex code or a pixel value in app.css, it is
   a bug: it means a decision was made twice and the two copies will drift.

   The direction, and why:

     Engineering fieldwork, not edtech. Warm paper, precise hairlines,
     monospace numerals, sharp corners. The previous palette (green + moss +
     amber on white) is the most common signature in educational software, so
     it read as generic. This reads as an instrument.

   One rule that is load-bearing rather than aesthetic:

     SAGE MEANS VERIFIED. It is used for nothing else, anywhere. Terracotta is
     for attention and current position; sage is for "a human checked this".
     Because the colour is never spent on decoration, learners come to read it
     before they read the label — which makes the palette itself part of the
     trust system. See DECISIONS.md D-012.

   Theming: light values live on bare :root, and only the values that change
   are redefined for dark. Never define a colour for the first time inside a
   media query — a token that exists in only one theme will render as
   `unset` in the other, usually as invisible text.
   ========================================================================== */

:root {
  /* ---- Ink: text, from strongest to faintest -------------------------- */
  --ink:            #10201F;  /* headings, primary text */
  --ink-2:          #29403D;  /* body text in dense blocks */
  --muted:          #6B7C79;  /* labels, captions, secondary information */
  --faint:          #9BA9A6;  /* placeholders, disabled, decorative */

  /* ---- Surfaces ------------------------------------------------------- */
  --paper:          #FAF8F4;  /* the page itself — warm, never pure white */
  --surface:        #FFFFFF;  /* raised cards */
  --surface-2:      #F4F1EA;  /* recessed wells, table stripes */
  --surface-3:      #EDE9DF;  /* pressed states */

  /* ---- Rules: hairlines do the structural work that borders usually do */
  --rule:           #E4DFD4;
  --rule-strong:    #CFC8B9;

  /* ---- Accent: attention, current position, interactive ---------------- */
  --accent:         #A8481B;
  --accent-2:       #7E3512;  /* hover / pressed */
  --accent-wash:    #F7E9E1;  /* tinted background */
  --accent-edge:    #E3BFA8;  /* border on a washed surface */

  /* ---- Sage: VERIFIED, and nothing else ------------------------------- */
  --sage:           #3E5F4A;
  --sage-2:         #2C4635;
  --sage-wash:      #E4ECE4;
  --sage-edge:      #B8CCBC;

  /* ---- Shell: the dark chrome the content sits inside ------------------ */
  --shell:          #0C1A18;
  --shell-2:        #16302C;
  --shell-3:        #1F423C;
  --shell-ink:      #E9F0ED;
  --shell-muted:    #8FA5A0;

  /* ---- Type ----------------------------------------------------------- */
  /* Noto Serif Thai for display is the single most distinctive choice here.
     Thai academic interfaces are almost universally sans-serif, so a serif
     heading reads as considered and editorial rather than templated. */
  --font-display: "Noto Serif Thai", "IBM Plex Sans Thai", Georgia, serif;
  --font-body:    "IBM Plex Sans Thai", "Leelawadee UI", "Noto Sans Thai",
                  system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  /* A 1.28 modular scale. Restrained on purpose: the jumps are large enough
     to establish hierarchy and small enough that nothing shouts. */
  --fs-xs:    0.75rem;    /* 12px — legal, meta, tick labels */
  --fs-sm:    0.8125rem;  /* 13px — captions, chips */
  --fs-base:  1rem;       /* 16px — UI text */
  --fs-md:    1.0625rem;  /* 17px — body copy */
  --fs-lg:    1.3125rem;  /* 21px — section headings */
  --fs-xl:    1.625rem;   /* 26px — page headings */
  --fs-2xl:   2.125rem;   /* 34px — display */
  --fs-3xl:   2.75rem;    /* 44px — hero numbers */

  /* Thai needs more leading than Latin: tone marks and vowels stack above and
     below the baseline, and tight leading makes them collide. 1.8 for body is
     generous by Latin standards and correct for Thai. */
  --lh-tight: 1.32;
  --lh-snug:  1.5;
  --lh-body:  1.8;

  --tracking-eyebrow: 0.16em;  /* uppercase labels need generous tracking */

  /* ---- Space: a 4px base, used without exception --------------------- */
  --s-1:  0.25rem;   /*  4px */
  --s-2:  0.5rem;    /*  8px */
  --s-3:  0.75rem;   /* 12px */
  --s-4:  1rem;      /* 16px */
  --s-5:  1.5rem;    /* 24px */
  --s-6:  2rem;      /* 32px */
  --s-7:  3rem;      /* 48px */
  --s-8:  4rem;      /* 64px */
  --s-9:  6rem;      /* 96px */

  /* ---- Radii: sharp. Roundness reads as friendly; sharp reads as precise */
  --r-sm:  2px;
  --r-md:  4px;
  --r-lg:  6px;
  --r-pill: 999px;

  /* ---- Elevation: barely there. Depth comes from hairlines and warmth,
         not from drop shadows, which is what keeps this from looking like a
         dashboard template. */
  --shadow-sm: 0 1px 2px rgba(16, 32, 31, 0.05);
  --shadow-md: 0 2px 8px rgba(16, 32, 31, 0.07);
  --shadow-lg: 0 8px 32px rgba(16, 32, 31, 0.10);

  /* ---- Layout --------------------------------------------------------- */
  --measure:      42rem;   /* ~68 characters — the readable text column */
  --measure-wide: 54rem;   /* method cards, tables, anything with columns */
  --rail:         21rem;   /* the tutor sidebar */

  /* ---- Motion: short and few. One considered transition beats ten. ----- */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 420ms;
}

/* --------------------------------------------------------------------------
   Dark theme
   --------------------------------------------------------------------------
   A selected palette, not an inverted one. The accent and sage are lightened
   because the same hex that reads confident on paper reads muddy on near-black
   and fails contrast. The paper metaphor becomes "ink on a drafting table at
   night" rather than "a white page with the lights off".
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:         #E9F0ED;
    --ink-2:       #C6D4D0;
    --muted:       #8FA09C;
    --faint:       #63736F;

    --paper:       #0D1615;
    --surface:     #131F1D;
    --surface-2:   #182825;
    --surface-3:   #1F332F;

    --rule:        #243633;
    --rule-strong: #334A46;

    --accent:      #E0794A;
    --accent-2:    #F0946A;
    --accent-wash: #2A1C15;
    --accent-edge: #5C3722;

    --sage:        #86B092;
    --sage-2:      #A3C7AC;
    --sage-wash:   #16241A;
    --sage-edge:   #33513B;

    --shell:       #070F0E;
    --shell-2:     #101E1C;
    --shell-3:     #182E2A;

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

/* An explicit choice always wins over the system preference, in both
   directions — which is why the dark values are repeated here rather than
   only living in the media query above. */
:root[data-theme="dark"] {
  --ink:         #E9F0ED;
  --ink-2:       #C6D4D0;
  --muted:       #8FA09C;
  --faint:       #63736F;

  --paper:       #0D1615;
  --surface:     #131F1D;
  --surface-2:   #182825;
  --surface-3:   #1F332F;

  --rule:        #243633;
  --rule-strong: #334A46;

  --accent:      #E0794A;
  --accent-2:    #F0946A;
  --accent-wash: #2A1C15;
  --accent-edge: #5C3722;

  --sage:        #86B092;
  --sage-2:      #A3C7AC;
  --sage-wash:   #16241A;
  --sage-edge:   #33513B;

  --shell:       #070F0E;
  --shell-2:     #101E1C;
  --shell-3:     #182E2A;

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