/* The single source of truth for design tokens.
   No page and no other stylesheet may define one. Token names describe role,
   not appearance, so the dark block below can be reasoned about.

   Every neutral here is mixed from the teal, so nothing on screen is
   off-palette by accident. The teal predates the Tamizhi Books rebrand — the
   red and yellow of the logo appear only in the logo itself, which is why the
   mark sits on its own disc rather than in a tinted tile. Recolouring the
   whole system to the brand red is a separate job: --primary carries answer
   state, and red already means "wrong" throughout the app. */

:root {
  /* Surfaces — teal-tinted neutrals.
     --surface-page sits a real step below --surface-card. It used to be #F2F6F6
     against a white card: about 4% apart, which is under what an eye reads as
     two planes, so every block needed a border to be seen at all and the page
     came out as 35 outlined rectangles on one flat sheet. With the ground
     lowered and the elevation scale below, a card is separated by being lit
     rather than by being fenced. */
  --surface-page: #E8EEEE;
  --surface-card: #FFFFFF;
  /* Now lighter than the page ground, not darker: it is the tint used *inside*
     a card — table headings, feature tiles, hover rows — and those must stay
     below white without dropping to the page's own value. */
  --surface-sunken: #F1F5F5;

  /* Lines. Softened, because separation is the shadow's job now; a border that
     still has to carry it is what made the page read as a form. */
  --line-soft: #EFF4F4;
  --border-color: #E3EBEB;
  --border-strong: #CBD9D9;
  --border-hover: #CBD9D9;

  /* Ink. --text-faint is 2.74:1 and is decorative only: option letters,
     counters, stat descriptors. Never load-bearing text. */
  --text-main: #101E20;
  --text-muted: #5F7476;
  --text-faint: #8CA0A1;
  /* --text-muted is calibrated against --surface-card and measures 4.95:1 on
     white. The page ground is darker, and the same ink on it is 4.21:1, which
     fails AA — so muted text that sits on the ground rather than in a card
     (the hero sub-line on four pages, the landing page's proof line) takes
     this instead. Two shades down, back to 4.95:1 on --surface-page, so the
     two read at the same weight wherever they appear. Dark mode needs no
     second value: --text-muted there is 8.09:1 on its own ground already. */
  --text-muted-on-page: #55696B;

  /* Teal. --primary is the logo colour and measures 3.96:1 on white, which
     fails AA for text — it is for borders, fills and icons only. Teal TEXT
     uses --primary-text (6.03:1). This is the easiest mistake to make here. */
  --primary: #058E94;
  --primary-text: #046E73;
  --primary-hover: #03565A;
  --primary-glow: #E8F2F2;
  /* One step deeper than --primary-glow. The glow was chosen to sit on the old
     lighter page ground; on the current one it is the same value as the page,
     so a card filled with it disappears. This is the fill for tinted cards that
     sit directly on the page. */
  --primary-tint: #DBEAEA;

  /* The only two warm values in the system. Each has exactly one job. */
  --accent-amber: #9A6A05;
  --accent-amber-bg: #FDF4E3;
  --accent-amber-line: #E4CE9C;
  --accent-red: #A03226;
  --accent-red-bg: #FBEFEF;
  --accent-red-line: #C0392B;

  /* The bookmark, and the one sanctioned second COOL accent.
     
     Chosen deliberately and against this file's own one-accent rule, so the
     reasoning is worth writing down. A bookmark is not answer state, and the
     card it sits on already spends teal on being correct — so the mark needed
     a hue nothing else on that card uses. Amber did the job before this and
     did it well, being the only warm value in reach.
     
     197°, and that number is the whole point. --primary is 182° and the Unit
     5B dot is 189°, both of which share a chip with this mark; anything below
     about 195° reads as a slightly-wrong teal rather than as a different idea.
     #00CED1, the hex usually sold as "Caribbean blue", is 181° — the site teal
     with the lights on — and was rejected for exactly that reason.
     
     4.9:1 on --surface-card, so it clears AA as an icon and as text. */
  --accent-blue: #0077A6;
  --accent-blue-bg: #E7F2F7;
  --accent-blue-line: #9FCADD;

  /* A correct answer is teal, not green: a second unrelated hue is the
     problem this palette exists to solve. It reuses --primary and
     --primary-glow directly rather than carrying its own alias. Wrong stays
     red, and the two remain unambiguous by fill as well as by hue. */

  /* The twelve syllabus-unit hues are data encoding, not decoration — each
     unit's dot must stay distinguishable. They are the one sanctioned
     exception to the one-accent rule and appear only as 8px dots and tag text. */
  --unit-1: #3b82f6; --unit-2: #10b981; --unit-3A: #8b5cf6;
  --unit-3B: #ec4899; --unit-4: #f59e0b; --unit-5A: #ef4444;
  --unit-5B: #06b6d4; --unit-6A: #a855f7; --unit-6B: #14b8a6;
  --unit-6C: #db2777; --unit-7: #f43f5e; --unit-8: #84cc16;

  /* Fraunces is display: masthead, numerals, option letters. Newsreader is
     reading: question stems. They never appear at the same size.
     Inter ships no Tamil glyphs, so Tamil needs its own face and more
     leading than Latin at the same size. */
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-read: 'Newsreader', Georgia, serif;
  --font-tamil: 'Noto Sans Tamil', 'Nirmala UI', sans-serif;

  --measure: 62ch;
  --tap-target: 44px;

  /* Two radii, by size of thing. One value cannot serve both: 3px on a card
     reads as a spreadsheet cell, and the card radius on a 20px badge reads as
     a pill. --radius is for controls, badges, chips and inputs; --radius-lg is
     for cards, bands, panels and table containers. */
  --radius: 6px;
  --radius-lg: 14px;

  /* Elevation. Two shadows per step: a tight one for the contact edge and a
     wide, weak one for the ambient cast — a single blur reads as a smudge.
     Tinted with the ink colour rather than pure black, so the cast stays in
     the same teal-neutral family as everything else. */
  --shadow-sm: 0 1px 2px rgba(16, 30, 32, 0.05), 0 1px 3px rgba(16, 30, 32, 0.04);
  --shadow-md: 0 1px 2px rgba(16, 30, 32, 0.04), 0 4px 12px rgba(16, 30, 32, 0.07);
  --shadow-lg: 0 2px 4px rgba(16, 30, 32, 0.04), 0 14px 34px rgba(16, 30, 32, 0.10);
}

/* Dark mode swaps values, never names. The light accents are chosen to sit on
   white; the same values on a dark card fall below readable contrast. Teal
   lightens to #4FC3C9 (7.47:1 on --surface-card). Surfaces are teal-shifted
   near-blacks rather than neutral slate, so the hue discipline holds in both
   themes. Borders lighten, which is the right direction on a dark surface. */
/* Both selectors, deliberately. assets/js/theme.js sets the class on <html>
   from <head> so nothing flashes white before the first paint, while the four
   pages that still carry their own toggle set it on <body>. Either one has to
   produce the dark palette. */
html.dark-mode,
body.dark-mode {
  --surface-page: #0B1A1C;
  --surface-card: #12262A;
  --surface-sunken: #173236;

  --line-soft: #1B383C;
  --border-color: #22454A;
  --border-strong: #2E5A60;
  --border-hover: #2E5A60;

  --text-main: #E6EFEF;
  --text-muted: #9DB3B4;
  --text-faint: #74908F;
  /* Restated rather than inherited: without this the light value would leak
     through and paint dark-mode hero copy in a near-black. Same ink as
     --text-muted here, which the dark ground already carries at 8.09:1. */
  --text-muted-on-page: #9DB3B4;

  --primary: #4FC3C9;
  --primary-text: #7FD6DA;
  --primary-hover: #A8E6E9;
  --primary-glow: rgba(79, 195, 201, 0.14);
  --primary-tint: rgba(79, 195, 201, 0.17);

  --accent-amber: #F0C264;
  --accent-amber-bg: rgba(240, 194, 100, 0.13);
  --accent-amber-line: rgba(240, 194, 100, 0.4);

  /* #0077A6 measures about 2.4:1 on --surface-card here, so the dark theme
     takes the same hue lifted into range — the identical treatment --primary
     and --accent-amber get a few lines up. */
  --accent-blue: #38B6E0;
  --accent-blue-bg: rgba(56, 182, 224, 0.14);
  --accent-blue-line: rgba(56, 182, 224, 0.42);
  --accent-red: #F09189;
  --accent-red-bg: rgba(240, 145, 137, 0.13);
  --accent-red-line: rgba(240, 145, 137, 0.45);

  /* Near-black and heavier. A shadow tinted with light ink is invisible on a
     dark ground; on dark surfaces the cast has to be darker than the surface
     it falls on, which means real black at a higher alpha. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55);
}