/* ==========================================================================
   TRIDENT design tokens — a living historical expedition
   --------------------------------------------------------------------------
   Colour carries meaning here, never decoration. Each role below appears for
   one purpose and no other, so a learner can read the screen by colour alone:

     ink       text, navigation, outlines, the rails
     paper     the page itself
     white     reading and answering surfaces
     saffron   the one action the screen wants next — never two at once
     green     work that is finished, and answers that were right
     teal      the AI companion and anything fetched live from an API
     gold      experience, badges and rewards that have been unlocked
     red       errors, and answers that were wrong

   Every colour that becomes small text has a darkened partner (-ink suffix)
   that clears 4.5:1 on paper and on white.
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- the eight roles ---- */
  --ink: #142A43;
  --paper: #FFF8E8;
  --white: #FFFFFF;
  --saffron: #FF8A00;
  --green: #138A4B;
  --teal: #087F8C;
  --gold: #F4C542;
  --red: #C73A32;
  /* a quiet breathing colour, used behind imagery and the expedition hero so
     the page is not one unbroken sheet of cream */
  --sky: #DCEEF5;

  /* ---- text-safe partners --------------------------------------------
     Saffron and gold are bright mid-tones: right for fills and markers,
     far too light to carry words. These are the versions that become text
     or a thin icon stroke on a light surface.                           */
  --saffron-ink: #A64B00;
  --green-ink: #0E6B3A;
  --teal-ink: #066873;
  --gold-ink: #6F5406;
  --red-ink: #A82B24;

  /* ---- surfaces ---- */
  --bg: var(--paper);
  --surface: var(--white);
  --surface-sunken: #FBF2DC;
  --surface-raised: var(--white);
  --wash-saffron: #FFF0DC;
  --wash-green: #E8F5ED;
  --wash-teal: #E4F2F3;
  --wash-gold: #FDF3D4;
  --wash-red: #FBEAE8;
  --wash-sky: #EFF7FB;
  --wash-navy: #EDF1F6;

  /* ---- type colours ---- */
  --text: var(--ink);
  --text-muted: #5A6B7E;
  --text-on-ink: #FFF8E8;
  --text-on-saffron: #2B1500;
  --text-on-green: #FFFFFF;
  --text-on-teal: #FFFFFF;
  --text-on-red: #FFFFFF;

  /* ---- lines: one weight scale, used structurally ---- */
  --line: #DCD3BF;
  --line-strong: #B9AE95;
  --rule: 2px solid var(--ink);
  --hair: 1px solid var(--line);

  /* ---- spacing ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4.5rem;

  /* ---- shape: mostly square. The one curve in the system is the
     companion; the one cut corner is the stamp. ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius: 6px;
  --cut: 12px;
  --clip-stamp: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));

  --shadow-sheet: 0 1px 0 rgba(20, 42, 67, 0.06), 0 8px 20px rgba(20, 42, 67, 0.07);
  --shadow-lift: 0 18px 44px rgba(20, 42, 67, 0.18);

  /* ---- type ----------------------------------------------------------
     One sans runs the entire interface. The serif is allowed on exactly
     two things: a lesson title and a story title.                       */
  --font-ui: "Avenir Next", "Segoe UI", Inter, system-ui, -apple-system,
             "Helvetica Neue", Arial, sans-serif;
  --font-title: "Iowan Old Style", "Palatino Linotype", Palatino, Charter,
                "Bitstream Charter", "Sitka Text", Georgia, serif;
  --font-num: var(--font-ui);

  /* label/metadata 13-14px, body 16px, card titles 18px */
  --step--2: 0.8125rem;
  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  1.3125rem;
  --step-3:  clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --step-4:  clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem);   /* page title 28-38px */
  --step-5:  clamp(2rem, 1.5rem + 2.2vw, 3.05rem);      /* mission title 32-49px */

  --measure: 64ch;
  --shell: 1120px;
  --shell-read: 720px;
  --transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- the national band: brand identity, never progress ---- */
  --flag-saffron: #FF9933;
  --flag-white: #FFFFFF;
  --flag-green: #138808;
  --flag-height: 4px;
  --flag-edge: rgba(20, 42, 67, 0.45);

  /* ---- progress: one track, one fill, everywhere ---- */
  --meter-height: 10px;
  --meter-radius: 999px;
  --meter-track: #E7DFCB;
  --meter-track-edge: #8E836A;
  --meter-fill: var(--ink);
  --meter-fill-quiz: var(--teal);
  --meter-tick: rgba(255, 248, 232, 0.9);

  /* ---- image captions: fixed navy in both themes ---- */
  --caption-surface: #142A43;
  --caption-text: #FFF8E8;
  --caption-muted: #C9D3DE;
  --caption-link: #8FD8E0;

  /* ---- the sticky header, measured once ---- */
  --header-h: 68px;

  /* ---- era accents -------------------------------------------------
     Small semantic markers only: an emblem ring, a 3px rule, a dot beside
     a lesson. They never become a panel, a page or a background.        */
  --era-origins: #6E716A;
  --era-ancient: #087F8C;
  --era-medieval: #6B4FA1;
  --era-colonial: #B14F32;
  --era-independence: #138A4B;

  /* ---- the learning paths, told apart by line colour only ---- */
  --path-tn: var(--saffron);
  --path-cbse: var(--teal);
  --path-tnpsc: var(--green);

  /* ---- paper grain: a faint surveyor's wash, drawn once ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23142A43' stroke-width='0.5' opacity='0.05'%3E%3Cpath d='M0 40h160M0 80h160M0 120h160M40 0v160M80 0v160M120 0v160'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   Night reading — the same interface after dark. Optional, never the default.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ink: #E8EEF5;
  --paper: #0E1D2E;
  --white: #16293D;

  --saffron: #FF9E2C;
  --green: #35B472;
  --teal: #2FB3C0;
  --gold: #F4C542;
  --red: #E8756C;
  --sky: #16303F;

  --saffron-ink: #FFB65C;
  --green-ink: #5FD196;
  --teal-ink: #5FD3DD;
  --gold-ink: #F6D171;
  --red-ink: #F0948C;

  --bg: var(--paper);
  --surface: var(--white);
  --surface-sunken: #0A1726;
  --surface-raised: #1B3148;
  --wash-saffron: #3A2410;
  --wash-green: #10301F;
  --wash-teal: #0D2E33;
  --wash-gold: #332908;
  --wash-red: #381916;
  --wash-sky: #102A38;
  --wash-navy: #17304A;

  --text: var(--ink);
  --text-muted: #9FB2C6;
  --text-on-ink: #0E1D2E;
  --text-on-saffron: #2B1500;
  --text-on-green: #05210F;
  --text-on-teal: #042326;
  --text-on-red: #2B0C09;

  --line: rgba(232, 238, 245, 0.18);
  --line-strong: rgba(232, 238, 245, 0.34);

  --meter-track: #22384F;
  --meter-track-edge: #3A5068;
  --meter-tick: rgba(14, 29, 46, 0.9);
  --flag-edge: rgba(232, 238, 245, 0.28);
  --shadow-sheet: 0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.5);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23E8EEF5' stroke-width='0.5' opacity='0.05'%3E%3Cpath d='M0 40h160M0 80h160M0 120h160M40 0v160M80 0v160M120 0v160'/%3E%3C/g%3E%3C/svg%3E");
}