/* ============================================================
   KURIBO — Design Tokens
   Parent-facing ABA / autism-intervention app
   Single source of truth. Light theme on :root.
   ============================================================ */

:root {
  /* ---------- BRAND / PRIMARY (Rose — energy, warmth, reward) ---------- */
  --rose-50:  #FCEAF0;
  --rose-100: #FAD3DF;
  --rose-200: #F4A8BF;
  --rose-300: #ED7A9C;
  --rose-400: #E34E79;
  --rose-500: #D6285B;   /* base brand — bright rose */
  --rose-600: #BC1F4F;
  --rose-700: #9C1A43;
  --rose-800: #7C1736;
  --rose-900: #5F142C;

  /* ---------- SECONDARY (Indigo / Periwinkle — data accent, from reference) ---------- */
  --indigo-50:  #EEEFFE;
  --indigo-100: #DEE1FD;
  --indigo-200: #C5CAFB;
  --indigo-300: #A0A8F6;
  --indigo-400: #7C84EF;   /* periwinkle — charts, data */
  --indigo-500: #5A60E2;
  --indigo-600: #474BCC;
  --indigo-700: #3A3BA6;
  --indigo-800: #2F2F83;
  --indigo-900: #292868;

  /* ---------- NEUTRALS (warm-tinted, very low chroma) ---------- */
  --ink:        #1A1A17;
  --ink-soft:   #34342F;
  --gray-700:   #4A4A44;
  --gray-500:   #76766D;
  --gray-400:   #9A9A91;
  --gray-300:   #C6C6BF;
  --gray-200:   #E4E3DE;
  --gray-150:   #ECECE8;
  --gray-100:   #F4F4F1;
  --gray-50:    #FAFAF8;
  --white:      #FFFFFF;

  /* ---------- SEMANTIC (mastery-aware · non-punitive · never rose) ---------- */
  --mastered:        #1F9E63;   /* skill mastered / correct — green */
  --mastered-soft:   #E4F5EC;
  --emerging:        #D9912A;   /* in progress / prompted — amber */
  --emerging-soft:   #FBF0DB;
  --emerging-ink:    #6E4A0E;   /* text + icons on emerging-soft — amber, darkened to read on its tint */
  --practice:        #5C6573;   /* needs practice / incorrect — calm slate */
  --practice-soft:   #ECEEF1;
  --error:           #9C1A43;   /* true error / destructive — deep rose */
  --error-soft:      #FAD3DF;
  --info:            var(--indigo-500);
  --info-soft:       var(--indigo-50);

  /* ---------- SKILL-DOMAIN PASTELS (soft, low-stimulation) ---------- */
  --dom-communication: #BFD3F2;
  --dom-social:        #D6CBF0;
  --dom-daily:         #C3E3CE;
  --dom-motor:         #F5D2B8;
  --dom-play:          #F2E2AF;
  --dom-cognitive:     #B9E2E6;
  --dom-regulation:    #F2C9CE;
  --dom-behavior:      #CDD3DC;

  /* ---------- ROLE TOKENS ---------- */
  --bg-canvas:      var(--gray-100);
  --bg-surface:     var(--white);
  --bg-subtle:      var(--gray-50);
  --bg-sunken:      var(--gray-150);
  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);
  --text-strong:    var(--ink);
  --text-body:      var(--gray-700);
  --text-muted:     var(--gray-500);
  --text-faint:     var(--gray-400);
  --text-on-color:  var(--white);
  --accent:         var(--rose-500);
  --accent-press:   var(--rose-600);

  /* Hero gradient — raspberry→red, matched to the reference */
  --grad-hero: linear-gradient(155deg, #A8285E 0%, #C9264C 52%, #E03B45 100%);
  --grad-hero-soft: linear-gradient(150deg, #FCEAF0 0%, #FBE0E6 100%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: 34px;   --lh-display: 1.05;  --ls-display: -0.02em;
  --fs-h1:      27px;   --lh-h1:      1.12;  --ls-h1:      -0.018em;
  --fs-h2:      21px;   --lh-h2:      1.18;  --ls-h2:      -0.012em;
  --fs-h3:      17px;   --lh-h3:      1.25;  --ls-h3:      -0.006em;
  --fs-body-lg: 17px;   --lh-body-lg: 1.45;
  --fs-body:    15px;   --lh-body:    1.5;
  --fs-label:   13px;   --lh-label:   1.2;   --ls-label:   0.06em;
  --fs-caption: 12px;   --lh-caption: 1.3;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 8px;  --sp-4: 12px;
  --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px;
  --sp-9: 40px; --sp-10: 48px; --sp-11: 64px;
  --gutter: 20px;

  /* ---------- RADII ---------- */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   26px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --sh-sm:    0 1px 2px rgba(20,20,18,0.05);
  --sh-card:  0 1px 2px rgba(20,20,18,0.04), 0 6px 18px rgba(20,20,18,0.05);
  --sh-lift:  0 2px 6px rgba(20,20,18,0.05), 0 14px 34px rgba(20,20,18,0.08);
  --sh-nav:   0 -1px 0 rgba(20,20,18,0.04), 0 -8px 24px rgba(20,20,18,0.04);

  /* ---------- MOTION ---------- */
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  300ms;
  --ease-std:  cubic-bezier(0.2, 0, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  --tap-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}