/* ============================================================================
   learningwithsruthi design tokens

   PALETTE: Warmer Sage +, chosen 21.September.2026 after six options were put on
   a mock of the real site. Three values moved from the original palette and the
   reasons are on each below. Everything else -- status colours, fonts, radii --
   is unchanged.

   THE ONE PLACE a colour, a typeface, a corner or a shadow is decided. Change a
   value here and every page changes with it. That is the whole point of this
   file, and until 17.September.2026 it was not true: theme.css declared 19
   tokens, and 22 pages declared their own :root block that did not link
   theme.css at all, so they were not overriding the shared file, they were
   replacing it. The values had drifted apart:

     --bg          #f5f6ee in theme.css, #F6F5F1 on 20 pages, #f6f8fb on 1
     --shadow      12px blur in theme.css, 14px on 18 pages
     --shadow-lg   32px blur in theme.css, 44px on 4 pages, 50px on 2
     --r-md        14px on 13 pages, 13px on 4, 12px on 1

   Every value below is the one the most pages already used, so the great
   majority of pages do not move at all. Where a value did change, the note says
   so and says from what.

   This file is TOKENS ONLY. It carries no reset, no element styles and no
   component classes, which is why it is safe to link from any page: theme.css
   has all of that, and dropping theme.css onto a page that had been styling
   itself would restyle it. theme.css imports this file, so the 59 pages that
   already link theme.css need no change.

   Names are the long forms (--radius-md, not --r-md), decided 17.September.2026.
   ============================================================================ */

:root {
  /* --- Brand ------------------------------------------------------------- */
  --white: #FFFFFF;
  --forest: #143109;
  --sage: #A3A776;
  --sage-l: #D0D6B3;
  --sage-m: #E4E8CC;
  /* The button green. White on the light sage is 2.52, so a primary button needs
     its own deeper tone of the same colour: white on this is 4.75. */
  --sage-deep: #717744;
  --slate: #5C5749;
  /* The two ends of the forest ramp, used by the dark panels (the sign-in rail).
     They were literals inside onboarding.css, which meant a palette change could
     not reach them: the rail was still mixing the pre-22.September sage over a
     hand-written forest gradient. Named here so they move with the rest. */
  --forest-l: #1C3D12;
  --forest-d: #0E2407;
  /* Text on a forest ground. The footer uses its own, dimmer, value; this is the
     brighter one the rail needs for body copy at small sizes. */
  --on-forest: #EAF0D8;
  --blue: #3C648F;

  /* --- Surfaces ---------------------------------------------------------- */
  /* Was #f5f6ee in theme.css. 20 pages said #F6F5F1 and 1 said #f6f8fb, so the
     site had three page backgrounds all called --bg. This is the majority. */
  --bg: #F5F3EC;
  /* The same colour in channel form. rgba() cannot take a hex through var(),
     so anything that needs the ground WITH alpha (the translucent header, its
     scroll-edge gradient) has to have the channels. Keeping it beside --bg is
     what stops the two drifting apart again: the header was still painted in
     the old #F6F5F1 for the whole palette change, one to five levels off the
     new ground, which is the near-identical-off-white seam this file exists to
     get rid of. If --bg changes, change this line with it. */
  --bg-rgb: 245, 243, 236;
  --cream: #F5F1E8;
  --cream-2: #FAF9F2;

  /* --- Text -------------------------------------------------------------- */
  /* --ink is the primary text colour, which on this site is the brand forest.
     It was used on 3 pages and defined on 1 (as #1c2230, a cool near-black that
     matched nothing else), so the two parent checkout pages were asking for a
     colour that did not exist and getting no colour at all. */
  --ink: var(--forest);
  --ink-2: #2A3E1F;
  --muted: #7C8172;

  /* --- Lines ------------------------------------------------------------- */
  --line: rgba(20, 49, 9, 0.10);

  /* --- Status ------------------------------------------------------------ */
  /* Four reds reached this file from different pages: --error, --danger, --bad
     and --m-prio. They are kept apart here rather than quietly merged, because
     collapsing them changes what pages look like and that is a colour decision,
     not a naming one. Worth revisiting deliberately. */
  --error: #dc3545;
  --error-bg: #fef2f2;
  --danger: #B23B3B;
  --bad: #b3402f;
  --success: #2D6A30;
  --success-bg: #d1fae5;
  --good: #1f8a55;
  --warn: #B8862F;
  /* Warm accents, from the Warm Earth palette. Both carry text: 6.27 and 5.26. */
  --umber: #6E5537;
  --tan: #7F5F36;
  --accent: #2f5fd0;
  --accent-ink: #FFFFFF;

  /* --- Diagnostic report mastery bands ----------------------------------- */
  --m-strong: #2F6B33;
  --m-dev: #9BA06A;
  --m-need: #3C648F;
  --m-prio: #B23B3B;

  /* --- Type -------------------------------------------------------------- */
  /* --fp fallback was 'Trebuchet MS', Arial in theme.css and system-ui on 20
     pages. system-ui wins: it only shows at all if Dosis fails to load. */
  --fh: 'Young Serif', Georgia, serif;
  --fp: 'Dosis', system-ui, sans-serif;
  --fb: 'Bitter', Georgia, serif;

  /* --- Radius ------------------------------------------------------------ */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* --- Elevation --------------------------------------------------------- */
  /* Both widened slightly from theme.css to the values most pages carried. */
  --shadow: 0 2px 14px rgba(20, 49, 9, 0.07);
  --shadow-lg: 0 14px 44px rgba(20, 49, 9, 0.12);

  /* --- Blue scale --------------------------------------------------------- */
  /* The blue is the data colour and keeps its own ramp. Absorbed from theme.css
     when this file became the only place a palette token may be declared. */
  --blue-d: #2B4A6E;
  --blue-l: #7C9BC2;
  --blue-bg: #EAF0F7;

  /* --- Glass ------------------------------------------------------------- */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-2: rgba(255, 255, 255, 0.40);
  --glass-br: rgba(255, 255, 255, 0.55);
  --glass-sh: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
              0 12px 40px -12px rgba(20, 49, 9, 0.18),
              0 2px 8px rgba(20, 49, 9, 0.06);

  --line-2: rgba(20, 49, 9, 0.14);
  --shadow-xl: 0 22px 60px -20px rgba(20, 49, 9, 0.22);

  /* --- Short radius names ------------------------------------------------- */
  /* The long names above were decided 17.September.2026, but --r-md alone has
     106 uses across the site and the rest another 83. Renaming 189 call sites to
     settle a naming preference is not worth the risk, so the short names stay as
     aliases of the long ones. One value, two spellings, no drift possible. */
  --r-lg: var(--radius-lg);
  --r-md: var(--radius-md);
  --r-sm: var(--radius-sm);
  --r-pill: var(--radius-pill);
}

/* ============================================================================
   DARK
   Currently unreachable: the onboarding theme toggle and the setAttribute that
   applied a stored preference are both commented out, because a stored
   preference with no way to change it was worse than no dark mode. Carried here
   anyway, and kept correct, so that restoring the toggle is a one-line change
   rather than a second palette rebuild.

   Three values are NOT what theme.css had, because their light counterparts
   changed in the 22.September palette and the dark tones were derived from the
   old ones:
     --sage   #A9B07A -> #B1B786   (light moved #9BA06A -> #A3A776, warmer)
     --slate  #AEB5C8 -> #B8B19B   (light moved #525B76 -> #5C5749, warm brown)
   Both keep the exact light-to-dark lift the originals had, so the relationship
   between the two modes is unchanged and only the hue follows the new palette.
   --bg stays #0E1108: a near-black ground is not a tint of the light ground and
   has nothing to follow.
   ============================================================================ */

[data-theme="dark"] {
  --white: #14170F;
  --forest: #E8EBDA;
  --sage: #B1B786;
  --sage-l: #2B3320;
  --sage-m: #1E2416;
  --sage-deep: #8E9556;
  --slate: #B8B19B;
  --blue: #7FA3CE;
  --blue-d: #A9C2E0;
  --blue-l: #3C648F;
  --blue-bg: #16202E;

  --bg: #0E1108;
  /* Must move with --bg or the translucent header paints the light ground's
     channels onto a dark page. */
  --bg-rgb: 14, 17, 8;
  --cream: #1A1E13;
  --cream-2: #1A1E13;

  --ink: #E8EBDA;
  --ink-2: #C6CCB3;
  --muted: #9AA088;

  --line: rgba(232, 235, 218, 0.10);
  --line-2: rgba(232, 235, 218, 0.14);

  --error: #F47885;
  --error-bg: #3A1619;
  --success: #8DD690;
  --success-bg: #14291A;

  --glass-bg: rgba(30, 36, 22, 0.55);
  --glass-bg-2: rgba(30, 36, 22, 0.38);
  --glass-br: rgba(169, 176, 122, 0.22);
  --glass-sh: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 12px 40px -12px rgba(0, 0, 0, 0.55),
              0 2px 8px rgba(0, 0, 0, 0.35);

  --shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 22px 60px -20px rgba(0, 0, 0, 0.6);
}