/* ============================================================
   CYRUSMATH — SHARED DESIGN TOKENS
   Stage 1 extraction (UI-POLISH-PLAN.md). PURE REFACTOR:
   no values changed, no names renamed vs. the original inline
   :root blocks in index.html / admin.html / parent.html.

   Loaded via <link> BEFORE each page's inline <style> so that
   inline rules can still override (cascade order preserved).

   ⚠ KNOWN CROSS-FILE CONFLICT (to reconcile in Stage 2):
   These 4 tokens had DIFFERENT values in index vs admin/parent.
   Canonical values below = admin/parent's. index.html overrides
   all 4 inline in its own <style> to stay pixel-identical:
       --card  : index var(--glass-bg)  vs  admin/parent #FFFFFF
       --ink   : index #2D3436          vs  admin/parent #1F2937
       --ink2  : index #636E72          vs  admin/parent #6B7280
       --ink3  : index #B2BEC3          vs  admin/parent #9CA3AF
   See docs/BUGS.md.
   ============================================================ */

:root{
  /* ══════════════════════════════════════════════════════════
     index.html — "Soul Edition" PREMIUM PASTEL PALETTE
     Inspired by: Duolingo Kids * Apple Liquid Glass * Canva Education
     ══════════════════════════════════════════════════════════ */

  /* Core brand pastels */
  --coral:      #FF6B6B;   --coral2: #ff4f4f;  --coral3: #c93535;
  --mint:       #4ECDC4;   --mint2:  #38b2aa;  --mint3:  #2a8a83;
  --sun:        #FFE66D;   --sun2:   #ffd93d;  --sun3:   #e6b800;
  --lavender:   #A8D8EA;   --lav2:   #7ec8e3;  --lav3:   #4fa8cb;
  --peach:      #FFB347;   --peach2: #ff9f1c;  --peach3: #e07800;
  --blush:      #FF8B94;   --blush2: #ff6b78;  --blush3: #cc3a45;
  --sage:       #88D8B0;   --sage2:  #5dba8a;  --sage3:  #3d9467;
  --periwinkle: #C3B1E1;   --peri2:  #a08cc8;  --peri3:  #7a5faa;
  --cream:      #FFF8F0;   /* warm off-white base */
  --sky-pastel: #E8F4FD;   /* very light blue */

  /* Background: warm gradient */
  --bg-from:   #FFF1E6;   /* warm peach-cream */
  --bg-mid:    #FFF8F0;
  --bg-to:     #F0F4FF;   /* cool lavender-white */

  /* Glass surface tokens */
  --glass-bg:     rgba(255,255,255,0.55);
  --glass-bg2:    rgba(255,255,255,0.75);
  --glass-border: rgba(255,255,255,0.85);
  --glass-shadow: 0 8px 32px rgba(255,107,107,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --glass-blur:   blur(16px) saturate(1.6);

  /* Semantic aliases (keep game logic working) */
  --sky:    var(--lavender);
  --pink:   var(--blush);
  --purple: var(--periwinkle);
  --purple2:#9575CD;
  --gold:   var(--sun);   --gold2:var(--peach);  --gold3:var(--peach3);
  --green:  var(--sage);  --green2:var(--sage2);
  --blue:   var(--lavender); --blue2:var(--lav2);
  --red:    var(--coral); --coral2:#ff4f4f;
  --mint2:  var(--mint2); --mint3:var(--mint3);
  --sun2:var(--sun2);--sun3:var(--sun3);
  --fire1:#ff4500;--fire2:#ff8c00;--fire3:#ffd700;
  --xp:var(--sage);

  /* Text on light bg (index-only tokens; --ink/--ink2/--ink3/--card
     live in the dashboard block below and are overridden inline by index) */
  --white: #FFFFFF;
  --page:  var(--bg-from);

  /* Premium rounded corners */
  --r-sm:  14px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  30px;
  --r-2xl: 38px;

  /* Typography - Nunito for kids (rounded, friendly) */
  --f-h: 'Nunito', -apple-system, 'SF Pro Rounded', sans-serif;
  --f-b: 'Nunito', -apple-system, 'SF Pro Text', sans-serif;

  --nav-offset:100px;

  /* ══════════════════════════════════════════════════════════
     admin.html / parent.html — DASHBOARD TOKENS
     (parent.html does not use --sidebar-text-active; harmless here)
     ══════════════════════════════════════════════════════════ */
  --bg:#F4F5FB; --card:#FFFFFF;
  --sidebar-bg:#1B1D2E; --sidebar-text:rgba(255,255,255,.65);
  --sidebar-text-active:#fff; --sidebar-hover:rgba(255,255,255,.08);
  --sidebar-active:#1ABC9C;
  --ink:#1F2937; --ink2:#6B7280; --ink3:#9CA3AF;
  --border:rgba(0,0,0,0.06);   /* Stage 2: softened 0.07→0.06 per DESIGN-SYSTEM --border-subtle */
  --primary:#1ABC9C; --primary-d:#16A085; --secondary:#6366F1;
  --success:#10B981; --warn:#F59E0B; --danger:#EF4444; --premium:#A855F7;
  --shadow:0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-hover:0 4px 12px rgba(0,0,0,0.08);   /* Stage 2: hover lift 0.06→0.08 per DESIGN-SYSTEM --shadow-card-hover */
}