/* ============================================================
   Brainforest PDX — Design Tokens
   The single source of truth for color, type, spacing, and more.
   Change a value here and it updates everywhere it's used.
   ------------------------------------------------------------
   Direction: "Sunset" — warm, hopeful, playful-but-grounded.
   No red (reads as correction pen), no purple. Teal anchors
   the brightness so it stays credible with parents.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     1. COLOR — RAW RAMPS
     Each hue runs light (50) to dark (800). Use light stops for
     fills/tints, dark stops for text on light backgrounds.
     ---------------------------------------------------------- */

  /* Coral — the warm hero accent (sun cresting the horizon) */
  --coral-50:  #FFF1EC;
  --coral-100: #FFE0D4;
  --coral-200: #FFC3AC;
  --coral-300: #FFA07E;
  --coral-400: #FF7A50;  /* brand coral */
  --coral-500: #F2603A;
  --coral-600: #DB4F2B;
  --coral-700: #B23F1E;  /* accessible coral text on white */
  --coral-800: #7F2C13;

  /* Gold — sunshine, warmth, optimism */
  --gold-50:  #FFF8E1;
  --gold-100: #FFEFB8;
  --gold-200: #FFE083;
  --gold-300: #FFD457;
  --gold-400: #FFC93D;  /* brand gold */
  --gold-500: #F0B01F;
  --gold-600: #C98A0E;
  --gold-700: #9A6A08;  /* accessible gold text on white */
  --gold-800: #6B4A05;

  /* Amber — the mid-sky glow between gold and coral */
  --amber-50:  #FFF3E6;
  --amber-100: #FFDFBF;
  --amber-200: #FFC182;
  --amber-300: #FFAD5E;
  --amber-400: #FF9E45;  /* brand amber */
  --amber-500: #F07E1F;
  --amber-600: #C9640E;
  --amber-700: #9A4C08;

  /* Teal — the calm "dusk sky" anchor. Primary actions live here. */
  --teal-50:  #E9F5F6;
  --teal-100: #C6E6E8;
  --teal-200: #93CDD2;
  --teal-300: #57AEB5;
  --teal-400: #2A99A2;
  --teal-500: #178A94;  /* brand teal / primary */
  --teal-600: #127079;  /* primary hover */
  --teal-700: #0E565C;  /* accessible teal text on white */
  --teal-800: #0A3E43;

  /* Warm neutrals — paper, sand, and ink */
  --cream:     #FFFBF7;  /* page background */
  --sand-50:   #FBF4EC;
  --sand-100:  #F6E9DB;
  --sand-200:  #EFDCC8;
  --line:      #EFE2D4;  /* default hairline border */
  --line-strong: #E4D0BC;
  --ink-900:   #33272A;  /* primary text (deep warm charcoal) */
  --ink-700:   #6B5B54;  /* secondary text */
  --ink-500:   #7E6A60;  /* muted text / captions (darkened to meet AA on cream) */
  --ink-300:   #C9BCB4;  /* disabled */
  --white:     #FFFFFF;

  /* ----------------------------------------------------------
     2. COLOR — SEMANTIC ROLES
     Purpose-named tokens. Build components against THESE,
     not the raw ramps above, so a rebrand is a one-line change.
     ---------------------------------------------------------- */

  --color-primary:        var(--teal-600);  /* teal-600 for AA white-on-fill; teal-500 stays the brand identity hue */
  --color-primary-hover:  var(--teal-700);
  --color-primary-active: var(--teal-800);
  --color-on-primary:     var(--white);

  --color-secondary:      var(--gold-400);
  --color-secondary-hover: var(--gold-500);
  --color-on-secondary:   var(--gold-800);

  --color-accent:         var(--coral-400);
  --color-accent-hover:   var(--coral-500);
  --color-on-accent:      var(--ink-900);  /* dark ink on bright coral passes AA (white does not) */

  --surface-page:   var(--cream);
  --surface-card:   var(--white);
  --surface-sunk:   var(--sand-50);
  --surface-warm:   var(--coral-50);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-disabled:  var(--ink-300);
  --text-link:      var(--teal-700);
  --text-link-hover: var(--teal-600);

  --border:         var(--line);
  --border-strong:  var(--line-strong);
  --border-accent:  var(--coral-200);

  /* Status — note: "attention" is a warm burnt-orange, deliberately
     NOT correction-pen red, per brand. Still distinct and legible. */
  --success:       #2E8B57;
  --success-bg:    #E4F3EA;
  --success-text:  #1F6E43;
  --warning:       var(--gold-500);
  --warning-bg:    #FFF3D6;
  --warning-text:  #8A5E06;
  --info:          var(--teal-500);
  --info-bg:       var(--teal-50);
  --info-text:     var(--teal-700);
  --attention:     #C2521F;
  --attention-bg:  #FBE7DD;
  --attention-text:#8A3A14;

  /* Spectrum accents — "every kind of mind" (neurodiversity) */
  --green-100: #D4EFE0;
  --green-500: #58B368;
  --green-700: #19693F;
  --blue-100:  #DCEBFF;
  --blue-500:  #5B8DEF;
  --blue-700:  #2B5CC0;
  --violet-100:#EBE0FA;
  --violet-500:#9B72CF;
  --violet-700:#6B45A0;

  /* ----------------------------------------------------------
     3. TYPOGRAPHY
     Poppins = playful, friendly headings.
     Inter   = clean, highly legible body (dyslexia-conscious).
     ---------------------------------------------------------- */

  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --text-display: 3.5rem;   /* 56px — hero */
  --text-h1:      2.5rem;   /* 40px */
  --text-h2:      2rem;     /* 32px */
  --text-h3:      1.5rem;   /* 24px */
  --text-h4:      1.25rem;  /* 20px */
  --text-lg:      1.125rem; /* 18px — lead paragraphs */
  --text-base:    1rem;     /* 16px — body */
  --text-sm:      0.875rem; /* 14px */
  --text-xs:      0.75rem;  /* 12px — eyebrows, captions */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;  /* preferred for body — easier for struggling readers */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;  /* eyebrows / small caps */

  /* Comfortable reading measure — keeps lines from getting too long */
  --measure: 66ch;

  /* ----------------------------------------------------------
     4. SPACING — 4px base scale
     ---------------------------------------------------------- */

  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ----------------------------------------------------------
     5. RADIUS — generous & rounded (warm, kid-friendly)
     ---------------------------------------------------------- */

  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     6. ELEVATION — soft, warm-tinted shadows
     ---------------------------------------------------------- */

  --shadow-sm: 0 2px 8px rgba(51, 39, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(51, 39, 42, 0.10);
  --shadow-lg: 0 18px 44px rgba(51, 39, 42, 0.13);
  --shadow-focus: 0 0 0 3px rgba(23, 138, 148, 0.35); /* teal focus ring */

  /* ----------------------------------------------------------
     7. LAYOUT
     ---------------------------------------------------------- */

  --container:        1080px;
  --container-narrow: 720px;

  /* ----------------------------------------------------------
     8. DECORATIVE GRADIENTS (use sparingly — hero flourishes only)
     ---------------------------------------------------------- */

  --sunset:      linear-gradient(120deg, #FFC93D 0%, #FF9E45 42%, #FF7A50 100%);
  --sunset-soft: linear-gradient(120deg, #FFF3D6 0%, #FFE0D4 100%);

  /* ----------------------------------------------------------
     9. MOTION
     ---------------------------------------------------------- */

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}