/* ================================================================ */
/*  SPROUT LEARNING — DESIGN TOKEN HANDOFF                          */
/*  Version: 2.4 (Motion + child-appropriate touch targets)         */
/*  Prepared for: UI Designer — Website Redesign                    */
/* ================================================================ */
/*
  HOW THIS FILE IS ORGANIZED
  ---------------------------------------------------------------
  1. PRIMITIVES     Raw color/type/space values. Never reference
                     these directly in a component or page — they
                     exist so the layer below has something to
                     point to. (Figma: put these in a
                     "Primitives" variable collection.)

  2. SEMANTIC        Role-based aliases that point to primitives
                     (e.g. --color-primary → --jade-700). Use THESE
                     in page/section-level design decisions.
                     (Figma: "Semantic" collection, mode = Light.)

  3. COMPONENT       Tokens scoped to a specific UI element
                     (buttons, inputs, badges, links). Use THESE
                     when building actual components. If a token
                     you need isn't here, it should be added at
                     this layer — never hard-code a primitive
                     into a component.

  4. TYPOGRAPHY      Full type styles: family, size, weight,
                     line-height, letter-spacing.

  5. RADIUS & SHADOW  Corner radii and elevation/press shadows.

  6. SPACING          Layout spacing scale.

  7. OUT OF SCOPE     Explicit list of what this version does NOT
                     define, so gaps are documented decisions,
                     not oversights.

  NAMING CONVENTION: --category-role-state
  e.g. --button-primary-bg-hover
  ---------------------------------------------------------------
  CHANGELOG
  v1.0  Initial primitive palette (Jade/Coral/Gold), 3 tints each.
  v1.1  Extended Jade/Coral/Gold to full 50–900 scales. Added
        Meadow as a dedicated success color (previously success
        reused Jade-500, which was visually identical to the
        primary brand color).
  v2.0  Added semantic layer, component layer, full typography
        spec, extended shadows, and explicit out-of-scope notes.
        RESOLVED: success color uses a two-value system, matching
        how Error and Info already work in this system —
        Meadow-500 for fills/badges (paired with dark text) and
        Meadow-700 for white-text buttons/banners. A single-value
        alternative (#3E7722 used everywhere) was considered:
        it is fully accessible on its own, but reads darker/more
        muted than every other 500-level brand color, which
        changes the emotional tone of "success" relative to
        Coral/Gold. --color-success-strong is provided as an
        opt-in if a calmer, single-tone success color is preferred
        — see SEMANTIC section.
  v2.1  Palette refinement based on brand-alignment review:
        - Coral-500 brightening and the Jade decorative-split
          suggestion were both evaluated. Jade needed no change —
          the decorative split (--color-primary-decorative →
          jade-500, buttons → jade-700) was already in place.
          Coral-500 brightening was tried (#FF6F59 → #FF7A63) then
          reverted per brand preference — Coral-500 stays #FF6F59.
        - Added Lavender as a new Supporting primitive (50–900).
          Reserved for storytelling/creativity contexts — drawing
          cards, stories, craft & music activities. Not for primary
          CTAs or navigation. Lavender-700 is white-text safe
          (6.07:1); Lavender-500 pairs with dark text only (4.29:1
          on Ink-900 — large text/UI only, not body copy).
        - Sky's role expanded from "Info only" to "Info /
          Discovery" — added --color-discovery-decorative so Sky
          can be used in illustrations, hint boxes, and parent/
          learning-journey UI, not just info states.
        - Added --color-creative-* semantic set (mirrors the
          secondary/coral pattern) so Lavender has a proper
          role-based alias layer instead of being referenced as a
          bare primitive.
        - Added an EMOTIONAL TOKENS layer mapping brand emotions
          (growth, play, discovery, creativity, celebration, calm,
          confidence, focus) to existing color roles — see section
          2.5. Purely additive; does not change any existing token.
        - Added Recommended Usage Ratio as documentation (section 8)
          to keep the palette from drifting toward a "rainbow" UI:
          Jade 40% / Cream+White 25% / Coral 15% / Gold 8% /
          Sky 6% / Lavender 4% / System colors 2%.
  v2.2  Added full Dark Mode (section 3.5), scoped to the whole
        product per product-owner decision, not just parent UI.
        Deep-navy surfaces (not pure black) to stay in the Ink
        family. Every override is contrast-verified against the
        dark page background, not assumed from light-mode ratios —
        several 700-level fills (Jade, Lavender, Crimson) dropped
        below the 3:1 WCAG 1.4.11 non-text contrast minimum on dark
        navy and were bumped to 600. Coral-700 and Meadow-700
        cleared 3:1 as-is and are unchanged. See the approach note
        at the top of section 3.5 for full reasoning, and the note
        at the bottom flagging that Section 3's button tokens
        reference primitives directly rather than the semantic
        layer — a small pre-existing refactor that would let dark
        mode apply to buttons without a duplicated token set.
  v2.3  Added bilingual/RTL typography foundation (section 3.6),
        per founder decision 2026-07-14: site ships structurally
        bilingual (LTR + RTL) from launch, content phased in after.
        RESOLVES the RTL exclusion previously logged in section 7.
        In scope: Farsi type tokens (Vazirmatn, pending designer
        sign-off), tracking/line-height corrections for Arabic-
        script rendering, documented icon-mirroring convention.
        NOT in scope: logical-property conversion of component CSS
        (no component stylesheets exist yet — this is a coding
        standard for whoever writes them, see the closing note in
        3.6), calendar system (Gregorian vs. Solar Hijri — a
        separate, higher-stakes decision affecting Subscription/
        Report entities, flagged not resolved), Eastern Arabic vs.
        Western numerals (flagged, not decided).
  v2.4  Added Motion (3.7) and Touch Targets (3.8), prompted by a
        gap-analysis against an external design-system reference.
        RESOLVES the motion-token exclusion previously logged in
        section 7. Motion tokens are tied directly to
        ChildCharacterGuide §9 (animation as a brand requirement,
        not polish) — includes a 150ms floor, a --ease-playful
        overshoot curve reserved for reward moments and explicitly
        excluded from parent-area UI, and a prefers-reduced-motion
        override block. Touch targets are split by audience: Child
        Area (64-88px, larger than adult WCAG minimums — preschool
        fine motor control needs more room than the 44px standard)
        vs. Parent Area / public site (44px, standard). This token
        file's own consumer (the marketing website) should use the
        adult/public values, not the child values — the child
        values exist here for consistency with the eventual in-app
        token set, not because this file styles the Child Experience.
  ---------------------------------------------------------------
*/


/* ================================================================ */
/* 1. PRIMITIVES                                                    */
/* ================================================================ */
:root {

  /* ---------- Jade — Primary / Growth ---------- */
  --jade-50:  #EDF8F4;
  --jade-100: #DFF4EA;
  --jade-200: #B9E7D3;
  --jade-300: #78CCAC;
  --jade-400: #4BBB91;
  --jade-500: #1FAA76;
  --jade-600: #158F62;
  --jade-700: #0F6B4A;
  --jade-800: #116244;
  --jade-900: #0D4C35;

  /* ---------- Coral — Secondary / Action ---------- */
  --coral-50:  #FFF3F1;
  --coral-100: #FFE3DD;
  --coral-200: #FFC5BC;
  --coral-300: #FFA89B;
  --coral-400: #FF8B7A;
  --coral-500: #FF6F59;
  --coral-600: #E85A45;
  --coral-700: #B74F40;
  --coral-800: #934033;
  --coral-900: #723128;

  /* ---------- Gold — Accent / Reward ---------- */
  --gold-50:  #FFF9ED;
  --gold-100: #FFF1D6;
  --gold-200: #FFE1A8;
  --gold-300: #FFD37D;
  --gold-400: #FFC452;
  --gold-500: #FFB627;
  --gold-600: #E0A022;
  --gold-700: #B7831C;
  --gold-800: #936916;
  --gold-900: #725111;

  /* ---------- Meadow — Success (dedicated, distinct from Jade) --- */
  --meadow-50:  #F1F7EE;
  --meadow-100: #DDEDD5;
  --meadow-200: #BBDBAC;
  --meadow-300: #9AC982;
  --meadow-400: #78B759;
  --meadow-500: #57A630;
  --meadow-600: #4C922A;
  --meadow-700: #3E7722;
  --meadow-800: #32601B;
  --meadow-900: #274A15;

  /* ---------- Lavender — Supporting / Creativity ---------- */
  /* Reserved for storytelling, imagination & creative activities   */
  /* (drawing cards, stories, craft, music). Not a primary color —  */
  /* keep usage light (~4% of UI) so it stays special. See section  */
  /* 2.5 for the --color-creative-* semantic aliases.                */
  --lavender-50:  #F3F1FE;
  --lavender-100: #E8E4FD;
  --lavender-200: #D2C9FC;
  --lavender-300: #B6A8FA;
  --lavender-400: #9F8FF9;
  --lavender-500: #8B7CF8;
  --lavender-600: #7A68DE;
  --lavender-700: #6353B8;  /* white-text safe, 6.07:1 */
  --lavender-800: #4F4293;
  --lavender-900: #3C3270;

  /* ---------- Sky — Info / Discovery ---------- */
  --sky-50:  #EAF5FE;
  --sky-100: #D3EBFD;
  --sky-200: #A7D7FB;
  --sky-300: #7BC3F9;
  --sky-400: #4FAFF7;
  --sky-500: #2F9BF4;
  --sky-600: #2887DA;
  --sky-700: #257CC3;
  --sky-800: #1D5E93;
  --sky-900: #164667;

  /* ---------- Crimson — Error ---------- */
  --crimson-50:  #FDEDEF;
  --crimson-100: #FBD5DA;
  --crimson-200: #F5A9B4;
  --crimson-300: #EF7D8E;
  --crimson-400: #EA5468;
  --crimson-500: #E63950;
  --crimson-600: #CC3146;
  --crimson-700: #BE2A3D;
  --crimson-800: #942231;
  --crimson-900: #6E1A25;

  /* ---------- Ink — Text & Neutral scale ---------- */
  --ink-900: #1B2A4A;
  --ink-700: #3D4E6B;
  --ink-400: #748099;
  --ink-200: #C7CEDA;
  --ink-100: #E4E8EF;  /* NEW — light neutral, for subtle fills/dividers on dark surfaces */
  --ink-0:   #FFFFFF;

  /* ---------- Surfaces & borders ---------- */
  --bg-cream: #FBF7F0;
  --bg-white: #FFFFFF;
  --line:     #E7E1D6;
  --line-strong: #D6CDBC;  /* NEW — for borders that need more definition, e.g. active input */

  /* ---------- Dark surfaces & borders (NEW v2.1 — for dark mode) --- */
  /* Deep navy rather than pure black — stays in the Ink family so   */
  /* dark mode still reads as "Sprout," not a generic dark theme.    */
  --bg-page-dark:      #12192E;
  --bg-surface-dark:   #1B2440;  /* cards, modals, sheets */
  --bg-sunken-dark:    #0B1120;  /* wells, code blocks, inactive tabs */
  --line-dark:         #2C3655;
  --line-strong-dark:  #3D4A72;
}


/* ================================================================ */
/* 2. SEMANTIC TOKENS  (role-based — use these, not primitives)     */
/* ================================================================ */
:root {

  /* ---- Brand roles ---- */
  --color-primary:            var(--jade-700);   /* white-text safe, 6.52:1 */
  --color-primary-subtle:     var(--jade-100);   /* light fill for icon/badge backgrounds */
  --color-primary-decorative: var(--jade-500);   /* nav, illustration fills, large shapes — pair with dark text if labeled */
  --color-on-primary:         var(--ink-0);

  --color-secondary:            var(--coral-700); /* white-text safe, 5.0:1 */
  --color-secondary-subtle:     var(--coral-100);
  --color-secondary-decorative: var(--coral-500);
  --color-on-secondary:         var(--ink-0);

  --color-accent:         var(--gold-500);  /* NEVER pair with white text */
  --color-accent-subtle:  var(--gold-100);
  --color-on-accent:      var(--ink-900);   /* 8.11:1 — required, not optional */

  /* ---- Supporting roles ---- */
  --color-creative:            var(--lavender-700); /* white-text safe, 6.07:1 — use sparingly, ~4% of UI */
  --color-creative-subtle:     var(--lavender-100);
  --color-creative-decorative: var(--lavender-500); /* illustrations, character accents — pair with dark text if labeled */
  --color-on-creative:         var(--ink-0);

  --color-discovery-decorative: var(--sky-500); /* clouds, rivers, hint boxes, parent/learning-journey UI — not just Info states */

  /* ---- Feedback / semantic states ---- */
  --color-success:            var(--meadow-500); /* fills, badges — pair with --color-on-success */
  --color-success-strong:     var(--meadow-700); /* white-text buttons/banners, 5.43:1 */
  --color-success-subtle:     var(--meadow-100); /* background chip behind success icon/text */
  --color-on-success:         var(--ink-900);    /* 4.67:1 on Meadow-500 */
  --color-on-success-strong:  var(--ink-0);      /* on Meadow-700 */

  --color-error:            var(--crimson-500);
  --color-error-strong:     var(--crimson-700); /* white-text, 4.9:1+ */
  --color-error-subtle:     var(--crimson-100);
  --color-on-error:         var(--ink-0);       /* on Crimson-700 only — see component tokens */

  --color-warning:          var(--gold-500);
  --color-warning-subtle:   var(--gold-100);
  --color-on-warning:       var(--ink-900);

  --color-info:             var(--sky-500);
  --color-info-strong:      var(--sky-700);     /* white-text, 4.42:1 */
  --color-info-subtle:      var(--sky-100);
  --color-on-info:          var(--ink-0);       /* on Sky-700 */

  /* ---- Text ---- */
  --color-text-primary:   var(--ink-900);   /* 14.22:1 on white — default body/heading text */
  --color-text-secondary: var(--ink-700);   /* 8.40:1 — captions, helper text */
  --color-text-muted:     var(--ink-400);   /* 3.97:1 — large text/labels only, not body copy */
  --color-text-disabled:  var(--ink-200);
  --color-text-inverse:   var(--ink-0);     /* text on dark/brand-colored fills */

  /* ---- Surfaces ---- */
  --color-bg-page:      var(--bg-cream);
  --color-bg-surface:   var(--bg-white);   /* cards, modals, sheets */
  --color-bg-sunken:    var(--ink-100);    /* wells, code blocks, inactive tabs */

  /* ---- Borders ---- */
  --color-border:         var(--line);
  --color-border-strong:  var(--line-strong);
  --color-border-focus:   var(--sky-500);

  /* ---- Focus ring (accessibility — required on all interactive elements) ---- */
  --focus-ring-color: var(--sky-500);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
}


/* ================================================================ */
/* 2.5. EMOTIONAL TOKENS                                            */
/*  Purely additive — each one aliases an existing semantic token.  */
/*  Lets designers/devs ask "which emotion?" instead of "which      */
/*  color?" when making a decision. Use alongside, not instead of,  */
/*  the semantic tokens above.                                      */
/* ================================================================ */
:root {
  --emotion-growth:      var(--color-primary-decorative);   /* Jade */
  --emotion-play:         var(--color-secondary-decorative); /* Coral */
  --emotion-discovery:    var(--color-discovery-decorative); /* Sky */
  --emotion-creativity:   var(--color-creative-decorative);  /* Lavender */
  --emotion-celebration:  var(--color-accent);                /* Gold */
  --emotion-calm:         var(--color-bg-page);               /* Cream */
  --emotion-confidence:   var(--color-primary);               /* Jade Dark */
  --emotion-focus:        var(--color-info-strong);           /* Sky Dark */
}


/* ================================================================ */
/* 3. COMPONENT TOKENS                                              */
/* ================================================================ */
:root {

  /* ---------------- Buttons ---------------- */
  /* Primary */
  --button-primary-bg:          var(--jade-700);
  --button-primary-bg-hover:    var(--jade-500);
  --button-primary-bg-active:   var(--jade-600);
  --button-primary-bg-disabled: var(--ink-200);
  --button-primary-text:        var(--ink-0);
  --button-primary-text-disabled: var(--ink-400);
  --button-primary-shadow:      0 3px 0 var(--jade-900);
  --button-primary-shadow-disabled: none;

  /* Secondary */
  --button-secondary-bg:          var(--coral-700);
  --button-secondary-bg-hover:    var(--coral-800);
  --button-secondary-bg-active:   var(--coral-900);
  --button-secondary-bg-disabled: var(--ink-200);
  --button-secondary-text:        var(--ink-0);
  --button-secondary-shadow:      0 3px 0 var(--coral-900);

  /* Accent (celebratory / reward actions — use sparingly, e.g. "Claim reward") */
  --button-accent-bg:          var(--gold-500);
  --button-accent-bg-hover:    var(--gold-600);
  --button-accent-bg-active:   var(--gold-700);
  --button-accent-bg-disabled: var(--ink-200);
  --button-accent-text:        var(--ink-900);
  --button-accent-shadow:      0 3px 0 var(--gold-700);

  /* Success (confirmations, "Continue" after a correct answer) */
  --button-success-bg:          var(--meadow-700);
  --button-success-bg-hover:    var(--meadow-800);
  --button-success-bg-active:   var(--meadow-900);
  --button-success-text:        var(--ink-0);
  --button-success-shadow:      0 3px 0 var(--meadow-900);

  /* Danger (destructive actions — delete account, remove child profile) */
  --button-danger-bg:          var(--crimson-700);
  --button-danger-bg-hover:    var(--crimson-800);
  --button-danger-bg-active:   var(--crimson-900);
  --button-danger-text:        var(--ink-0);
  --button-danger-shadow:      0 3px 0 var(--crimson-900);

  /* Ghost / tertiary */
  --button-ghost-bg:          transparent;
  --button-ghost-bg-hover:    var(--ink-100);
  --button-ghost-border:      var(--color-border);
  --button-ghost-text:        var(--ink-900);
  --button-ghost-text-disabled: var(--ink-400);

  /* ---------------- Inputs / form fields ---------------- */
  --input-bg:               var(--bg-white);
  --input-bg-disabled:      var(--ink-100);
  --input-border:           var(--line);
  --input-border-hover:     var(--line-strong);
  --input-border-focus:     var(--sky-500);
  --input-border-error:     var(--crimson-500);
  --input-text:             var(--ink-900);
  --input-placeholder:      var(--ink-400);
  --input-label:            var(--ink-700);
  --input-helper-text:      var(--ink-400);
  --input-error-text:       var(--crimson-700);

  /* ---------------- Badges / chips / tags ---------------- */
  --badge-success-bg:   var(--meadow-100);
  --badge-success-text: var(--meadow-800);
  --badge-error-bg:     var(--crimson-100);
  --badge-error-text:   var(--crimson-800);
  --badge-warning-bg:   var(--gold-100);
  --badge-warning-text: var(--gold-800);
  --badge-info-bg:      var(--sky-100);
  --badge-info-text:    var(--sky-800);
  --badge-neutral-bg:   var(--ink-100);
  --badge-neutral-text: var(--ink-700);
  --badge-creative-bg:   var(--lavender-100);
  --badge-creative-text: var(--lavender-800);

  /* ---------------- Links ---------------- */
  --link-text:         var(--jade-700);
  --link-text-hover:   var(--jade-800);
  --link-text-visited: var(--jade-900);

  /* ---------------- Cards / surfaces ---------------- */
  --card-bg:      var(--bg-white);
  --card-border:  var(--color-border);
  --card-shadow:  0 2px 0 var(--line), 0 10px 24px -14px rgba(27, 42, 74, 0.25);

  /* ---------------- Navigation ---------------- */
  --nav-bg:            var(--bg-white);
  --nav-text:          var(--ink-900);
  --nav-text-active:   var(--jade-700);
  --nav-indicator:     var(--jade-500);
}


/* ================================================================ */
/* 3.5. DARK MODE                                                   */
/*  Applies to the whole product (kid + parent UI) — toggle via     */
/*  [data-theme="dark"] on <html> or <body>. Swap the selector for  */
/*  @media (prefers-color-scheme: dark) if you want it OS-driven    */
/*  instead of (or in addition to) a manual toggle.                 */
/*                                                                   */
/*  APPROACH: fills at the 700-level (tuned for contrast against    */
/*  light/cream pages) go visually muddy against a dark navy page — */
/*  several fail the 3:1 WCAG 1.4.11 non-text contrast minimum for  */
/*  UI component boundaries. Where that happened, the fill moves    */
/*  one step brighter (700 → 600). Where the 700 already cleared    */
/*  3:1 against the dark page, it's left as-is — see the per-token  */
/*  contrast notes below. All ratios re-verified against the dark   */
/*  background, not assumed from the light-mode values.             */
/* ================================================================ */
:root[data-theme="dark"] {

  /* ---- Surfaces ---- */
  --color-bg-page:      var(--bg-page-dark);
  --color-bg-surface:   var(--bg-surface-dark);
  --color-bg-sunken:    var(--bg-sunken-dark);

  /* ---- Borders ---- */
  --color-border:         var(--line-dark);
  --color-border-strong:  var(--line-strong-dark);
  /* --color-border-focus stays --sky-500 — 5.91:1 against the dark page, no change needed */

  /* ---- Text ---- */
  --color-text-primary:   #F5F3EC;      /* cream-tinted white (not pure #FFF) — 15.71:1, keeps brand warmth */
  --color-text-secondary: var(--ink-200); /* 11.02:1 */
  --color-text-muted:     var(--ink-400); /* 4.39:1 on page / 3.85:1 on surface — large text/labels only, same rule as light mode */
  --color-text-disabled:  var(--ink-700);
  --color-text-inverse:   var(--ink-900); /* text placed on light-fill elements sitting on a dark page */

  /* ---- Brand roles (fills — see approach note above) ---- */
  --color-primary:            var(--jade-600);  /* 4.27:1 vs page; white text on it is 4.09:1 — AA for bold/large button labels, not small body text */
  --color-primary-decorative: var(--jade-400);  /* 7.32:1 vs page — icons, illustrations, character accents */

  --color-secondary:            var(--coral-700); /* unchanged — 3.49:1 vs page, white text still 5.0:1 */
  --color-secondary-decorative: var(--coral-400); /* 7.66:1 vs page */

  /* --color-accent unchanged — gold-500 + ink-900 text is independent of page color */

  --color-creative:            var(--lavender-600); /* 4.04:1 vs page; white text 4.32:1 — same bold/large-label caveat as Primary */
  --color-creative-decorative: var(--lavender-400); /* 6.45:1 vs page */

  /* --color-discovery-decorative unchanged — sky-500 is 5.91:1 vs the dark page */

  /* ---- Feedback / semantic states ---- */
  /* --color-success / --color-success-strong unchanged — meadow-700 is 3.21:1 vs page, white text 5.43:1 */
  --color-error:         var(--crimson-600); /* was crimson-500 in light mode; crimson-700 dropped below 3:1 vs the dark page, so the whole error pair shifts one step brighter */
  --color-error-strong:  var(--crimson-600); /* 3.4:1 vs page, white text 5.13:1 */
  /* --color-warning / --color-info unchanged for the same reason as Accent/Discovery above */

  /* ---- Links ---- */
  --link-text:         var(--jade-300);  /* 9.16:1 vs page — jade-700 (light-mode link color) is unreadable at 2.68:1 on dark */
  --link-text-hover:   var(--jade-200);
  --link-text-visited: var(--jade-400);

  /* ---- Badges (dark-native pairing: 900 bg + 200 text, not the light-mode 100/800 pair) ---- */
  --badge-success-bg:   var(--meadow-900);
  --badge-success-text: var(--meadow-200);
  --badge-error-bg:     var(--crimson-900);
  --badge-error-text:   var(--crimson-200);
  --badge-warning-bg:   var(--gold-900);
  --badge-warning-text: var(--gold-200);
  --badge-info-bg:      var(--sky-900);
  --badge-info-text:    var(--sky-200);
  --badge-creative-bg:   var(--lavender-900);
  --badge-creative-text: var(--lavender-200);
  --badge-neutral-bg:   var(--bg-surface-dark);
  --badge-neutral-text: var(--ink-200);

  /* ---- Cards / nav ---- */
  --card-bg:      var(--bg-surface-dark);
  --card-shadow:  0 2px 0 var(--line-dark), 0 10px 24px -14px rgba(0, 0, 0, 0.55); /* rgba tuned darker — the light-mode shadow (rgba ink-900) is invisible on a dark page */

  --nav-bg:            var(--bg-surface-dark);
  --nav-text:          #F5F3EC;
  --nav-text-active:   var(--jade-300);
  --nav-indicator:     var(--jade-400);

  /* ---- Buttons: primary / creative / danger fills follow the shifted */
  /* semantic tokens above automatically IF your components read from  */
  /* --color-primary / --color-creative / --color-error rather than    */
  /* hardcoded primitives. This file's Section 3 button tokens */
  /* (--button-primary-bg, etc.) currently reference primitives         */
  /* directly (e.g. var(--jade-700)) rather than the semantic layer —  */
  /* that's a pre-existing pattern from v2.0, not something introduced */
  /* here. To make dark mode work without duplicating every button    */
  /* token, the recommended fix is repointing Section 3's button      */
  /* tokens to the semantic aliases (--color-primary, --color-secondary, */
  /* --color-creative, --color-error) instead of raw primitives. Flag  */
  /* this to whoever owns component tokens before dark mode ships —   */
  /* it's a small refactor now vs. a duplicated token set later.       */
}


/* ================================================================ */
/* 4. TYPOGRAPHY                                                    */
/* ================================================================ */
:root {
  --font-display: 'Fredoka', sans-serif;
  --font-body:    'Lexend', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Display (Fredoka) — headlines, hero text */
  --text-display-lg-size: 40px;
  --text-display-lg-weight: 600;
  --text-display-lg-line-height: 1.1;
  --text-display-lg-tracking: -0.01em;

  --text-display-md-size: 24px;
  --text-display-md-weight: 600;
  --text-display-md-line-height: 1.2;
  --text-display-md-tracking: -0.005em;

  --text-display-sm-size: 19px;      /* NEW — card titles, modal headers */
  --text-display-sm-weight: 600;
  --text-display-sm-line-height: 1.25;
  --text-display-sm-tracking: 0em;

  /* Body (Lexend) — paragraph and UI copy */
  --text-body-lg-size: 16px;
  --text-body-lg-weight: 400;
  --text-body-lg-line-height: 1.5;
  --text-body-lg-tracking: 0em;

  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-line-height: 1.5;
  --text-body-md-tracking: 0em;

  --text-body-sm-size: 12px;         /* NEW — helper text, captions */
  --text-body-sm-weight: 400;
  --text-body-sm-line-height: 1.4;
  --text-body-sm-tracking: 0.005em;

  --text-body-lg-weight-medium: 500; /* for emphasized body copy / button labels */

  /* Mono (IBM Plex Mono) — stats, tags, labels */
  --text-mono-sm-size: 12px;
  --text-mono-sm-weight: 500;
  --text-mono-sm-line-height: 1.4;
  --text-mono-sm-tracking: 0.02em;

  --text-mono-xs-size: 11px;
  --text-mono-xs-weight: 500;
  --text-mono-xs-line-height: 1.4;
  --text-mono-xs-tracking: 0.04em;
}


/* ================================================================ */
/* 3.6. BILINGUAL / RTL FOUNDATION                                  */
/*  Hooks off two DIFFERENT selectors on purpose:                   */
/*    - [dir="rtl"]   → layout/direction concerns                   */
/*    - :lang(fa)      → typeface/typography concerns                */
/*  These are usually the same page, but conceptually different —   */
/*  direction is about layout, language is about type rendering.    */
/*  Keeping them separate means a future LTR-but-Farsi-labeled       */
/*  edge case (rare, but e.g. embedded product names) doesn't        */
/*  silently break. Set both `lang` and `dir` on <html> per page,   */
/*  driven by Polylang's active language — never toggle per-        */
/*  component.                                                       */
/*                                                                   */
/*  FONT CHOICE: Vazirmatn recommended (pending designer sign-off)  */
/*  — variable font, wide weight range, reads as warm/rounded        */
/*  rather than clinical, which is the closest match to Fredoka's    */
/*  personality available for Arabic-script text. Farsi typically   */
/*  does NOT split display/body across two distinct families the    */
/*  way this system does for Latin (Fredoka/Lexend) — one family    */
/*  across weights is the normal convention, so --font-display-fa   */
/*  and --font-body-fa intentionally point to the same family here. */
/*                                                                   */
/*  TRACKING: all Latin tracking values in Section 4 are ZEROED     */
/*  out under :lang(fa). Arabic-script letterforms join to their    */
/*  neighbors; any positive or negative letter-spacing breaks that  */
/*  joining and makes the text look visually broken, not stylistic. */
/*  This is not a style preference — it's close to a rendering bug  */
/*  if skipped.                                                     */
/*                                                                   */
/*  LINE-HEIGHT: bumped slightly across the board under :lang(fa).  */
/*  Farsi diacritics and descenders need more vertical room than    */
/*  the Latin values in Section 4 were tuned for.                   */
/* ================================================================ */
:root {
  --font-display-fa: 'Vazirmatn', sans-serif;
  --font-body-fa:    'Vazirmatn', sans-serif;
  /* No separate --font-mono-fa — mono/stat contexts (Section 4) are
     expected to stay numerals-and-Latin-labels even on Farsi pages;
     revisit only if Farsi numerals (Eastern Arabic digits) are
     adopted — see the open item below. */
}

:lang(fa) {
  --font-display: var(--font-display-fa);
  --font-body:    var(--font-body-fa);

  --text-display-lg-tracking: 0em;
  --text-display-md-tracking: 0em;
  --text-display-sm-tracking: 0em;
  --text-body-sm-tracking:    0em;
  /* --text-body-lg-tracking / --text-body-md-tracking already 0em,
     no override needed */

  --text-display-lg-line-height: 1.25;  /* was 1.1 */
  --text-display-md-line-height: 1.35;  /* was 1.2 */
  --text-display-sm-line-height: 1.4;   /* was 1.25 */
  --text-body-lg-line-height:    1.65;  /* was 1.5 */
  --text-body-md-line-height:    1.65;  /* was 1.5 */
  --text-body-sm-line-height:    1.55;  /* was 1.4 */
}

/* ---- Icon mirroring convention (documentation, not a token) ----
   Apply to purely directional line icons (chevrons, back/forward
   arrows, progress carets) — NOT to brand/character illustrations,
   which need hand-authored mirrored variants or a direction-neutral
   pose instead (auto-flipping breaks asymmetric character art).

   [dir="rtl"] .icon-directional {
     transform: scaleX(-1);
   }
------------------------------------------------------------------- */

/* ---- Open items — flagged, not decided here ----
   - Numeral system: Western (0-9) vs. Eastern Arabic (٠-٩) digits
     for Farsi UI. Recommend Western for consistency across the
     Report/dashboard numeric displays (Domain Model 2.12) and to
     avoid mixed-numeral confusion for a 4-6-year-old's parent — but
     this is a founder/localization call, not a default to assume.
   - Calendar system: Gregorian vs. Solar Hijri for Farsi date
     display (Subscription.renews_at, Report.period, ActivityAttempt
     timestamps). Higher-stakes than it looks — affects storage
     format, not just display formatting, if Solar Hijri is chosen.
     Resolve before Report/billing UI is built, not before the
     website ships.
------------------------------------------------------------------- */


/* ================================================================ */
/* 3.7. MOTION                                                      */
/*  Previously flagged out-of-scope (see historical note in section */
/*  7). Promoted to in-scope because ChildCharacterGuide §9 makes   */
/*  motion a BRAND requirement, not a polish detail: "soft,         */
/*  friendly, expressive, smooth... avoid sudden movements, violent */
/*  effects, fast shaking, overstimulating visuals." Without tokens */
/*  enforcing this, it's a paragraph someone has to remember rather */
/*  than a default that's hard to violate by accident.              */
/*                                                                   */
/*  FLOOR RULE: nothing in this product should transition in under  */
/*  150ms or with a linear/abrupt curve — that reads as "snappy/    */
/*  efficient" for an adult productivity tool, but as "jarring" for */
/*  a 4-6-year-old. --duration-instant exists only for things that  */
/*  must NOT animate at all (see usage note below), not as a fast   */
/*  option for UI feedback.                                         */
/* ================================================================ */
:root {
  /* ---- Durations ---- */
  --duration-instant: 0ms;    /* use ONLY for prefers-reduced-motion overrides below — never for normal UI */
  --duration-fast:     150ms; /* hover, focus-ring appearance, small icon feedback */
  --duration-standard: 200ms; /* button state changes, card shadow elevation, input focus */
  --duration-slow:     350ms; /* modal/sheet open-close, page-section reveals */
  --duration-celebratory: 550ms; /* reward moments, badge unlocks, correct-answer celebrations — see ChildCharacterGuide §9 "celebrating discoveries" */

  /* ---- Easing ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* general-purpose, matches --duration-standard uses */
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);     /* entrances — elements arriving on screen */
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);     /* exits — elements leaving screen */
  --ease-playful:   cubic-bezier(0.34, 1.56, 0.64, 1); /* soft overshoot/bounce — reward moments, character gestures, "light jumping" per ChildCharacterGuide §9. Do NOT use on parent-area UI (Report, Settings, Billing) — overshoot reads as unserious in an adult admin context. */

  /* ---- Interaction feedback ---- */
  --scale-press: 0.98;   /* button/card active-state press — gentle, not the 0.9-ish "squish" some systems use */
  --scale-press-child: 0.95; /* slightly more pronounced for Child Area touch feedback — bigger visual confirmation for less precise taps, pairs with 3.8 */

  /* ---- Composed transition tokens (use these directly on components) ---- */
  --transition-button:      background-color var(--duration-standard) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  --transition-card-shadow: box-shadow var(--duration-standard) var(--ease-standard);
  --transition-focus-ring:  outline-color var(--duration-fast) var(--ease-standard);
  --transition-reward:      transform var(--duration-celebratory) var(--ease-playful), opacity var(--duration-celebratory) var(--ease-out);
}

/* ---- Reduced motion (accessibility — required, not optional) ----
   Respect the OS-level setting. Collapse to a simple opacity
   cross-fade at --duration-fast rather than removing feedback
   entirely — a child (or parent) with vestibular sensitivity still
   needs to see that something happened, just without movement. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-standard:    var(--duration-fast);
    --duration-slow:        var(--duration-fast);
    --duration-celebratory: var(--duration-fast);
    --ease-playful:         var(--ease-standard); /* kill the overshoot specifically — bounce is the most likely trigger for motion sensitivity */
    --scale-press:          1;
    --scale-press-child:    1;
  }
}


/* ================================================================ */
/* 3.8. TOUCH TARGETS                                               */
/*  Previously absent entirely. Duolingo's reference spec uses the  */
/*  adult/WCAG standard (44x44px minimum) — that number is CORRECT  */
/*  for their audience and WRONG for ours. Preschool-age fine motor */
/*  control is meaningfully less precise than an adult's; children's*/
/*  UX research generally recommends larger minimums for ages 4-6   */
/*  than the WCAG adult floor. This product has two genuinely       */
/*  different audiences in two different zones — don't apply one    */
/*  number everywhere.                                               */
/* ================================================================ */
:root {
  /* ---- Child Area (Vol 02 §6/§8 — the child-facing experience) ---- */
  --touch-target-child-min:     64px;  /* absolute floor, secondary/tertiary actions */
  --touch-target-child-primary: 88px;  /* primary "tap to continue," answer choices, main interactive elements */
  --touch-target-child-gap:     var(--space-lg); /* 24px minimum gap between adjacent interactive elements — prevents mis-taps registering on the wrong target, more important than the target size alone */

  /* ---- Parent Area (Vol 02 §5/§9 — dashboard, settings, billing) ---- */
  --touch-target-adult-min: 44px; /* standard WCAG/iOS/Android floor — parents are adults, no reason to inflate this */
  --touch-target-adult-gap: var(--space-sm); /* 10px, standard adult spacing is fine here */

  /* ---- Public marketing site (this token file's primary consumer) ---- */
  /* Marketing/website audience is parents, not children — use
     --touch-target-adult-* values throughout the public site.
     --touch-target-child-* is reserved for the in-app Child
     Experience UI (separate build, not this website). */
}


/* ================================================================ */
/* 5. RADIUS & SHADOW                                               */
/* ================================================================ */
:root {
  --radius-lg: 20px;      /* cards, modals */
  --radius-md: 14px;      /* buttons, inputs */
  --radius-sm: 9px;       /* badges, small chips */
  --radius-pill: 100px;   /* pill buttons, tags */

  --shadow-card:            0 2px 0 var(--line), 0 10px 24px -14px rgba(27, 42, 74, 0.25);
  --shadow-btn-primary:     0 3px 0 var(--jade-900);
  --shadow-btn-secondary:   0 3px 0 var(--coral-900);
  --shadow-btn-accent:      0 3px 0 var(--gold-700);   /* NEW — parallels existing pattern */
  --shadow-btn-success:     0 3px 0 var(--meadow-900); /* NEW */
  --shadow-btn-danger:      0 3px 0 var(--crimson-900);/* NEW */
  --shadow-btn-creative:    0 3px 0 var(--lavender-900); /* NEW v2.1 — for occasional Lavender CTAs (e.g. "Start a Story") */
  --shadow-modal:           0 24px 48px -16px rgba(27, 42, 74, 0.35); /* NEW — needed for overlays */
}


/* ================================================================ */
/* 6. SPACING                                                       */
/* ================================================================ */
:root {
  --space-2xs: 4px;   /* NEW — icon padding, tight inline gaps */
  --space-xs:  6px;
  --space-sm:  10px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;  /* NEW — large section breaks on marketing pages */
}


/* ================================================================ */
/* 7. OUT OF SCOPE FOR THIS VERSION                                 */
/* ================================================================ */
/*
  These are documented exclusions, not oversights. Flag with the
  product owner if any of these are needed before the redesign ships:

  - DARK MODE: ~~no dark-theme values are defined~~ ADDED in v2.2 —
    see section 3.5. Scoped to the whole product (kid + parent UI)
    per product-owner decision on 2026-07-09.

  - MOTION / ANIMATION: ~~no duration or easing tokens included~~
    ADDED in v2.4 — see section 3.7.

  - TOUCH TARGETS: ~~not previously addressed~~ ADDED in v2.4 — see
    section 3.8. Split by audience (child vs. adult); this file's
    consumer (marketing site) should use the adult values.

  - BREAKPOINTS: still not included. Genuinely open — needed before
    responsive page-structure work can be built out from the page
    spec drafted 2026-07-14.

  - ICONOGRAPHY: no icon sizing scale included. Section 3.6's icon-
    mirroring convention assumes icons exist but doesn't define
    their size scale.

  - Z-INDEX SCALE: no layering tokens for modals/tooltips/toasts.

  - RTL / INTERNATIONALIZATION: ~~no logical-property considerations~~
    TYPOGRAPHY FOUNDATION added in v2.3 — see section 3.6. Still
    genuinely out of scope for THIS file: logical-property conversion
    of component CSS (margin-inline-* vs margin-left/right, text-align
    start/end vs left/right) — that work happens in component
    stylesheets that don't exist yet, not in this token file. Treat
    it as a mandatory coding standard for whoever writes them,
    ideally enforced via a Stylelint rule
    (declaration-property-value-disallowed-list blocking physical
    margin/padding/inset/text-align properties), not a manual-review
    catch. Also still open: numeral system and calendar system for
    Farsi — see the open items note at the end of section 3.6.
*/


/* ================================================================ */
/* 8. RECOMMENDED USAGE RATIO                                       */
/*  Not enforceable in CSS — documented here so the palette stays   */
/*  recognizable as Jade + Coral, and doesn't drift toward a        */
/*  "rainbow" UI as more colors get added.                          */
/* ================================================================ */
/*
  Jade (primary)........... 40%
  Cream / White (bg)....... 25%
  Coral (secondary)........ 15%
  Gold (accent)............  8%
  Sky (info/discovery)....   6%
  Lavender (creative)......  4%
  System colors (semantic).  2%

  Rule of thumb: if a page reads as "colorful" rather than
  "Jade-and-Coral with warm accents," Lavender or Sky usage has
  likely crept past its supporting-color budget.
*/