/* ============================================================================
   HOMEWORK HUB — DESIGN TOKENS
   Iteration 1 · "Harbour" — blue-led, soft & muted, cool-grey neutrals,
   apricot warm accent + gold reward.
   Fonts: Fredoka (display) · Nunito Sans (body) · JetBrains Mono (code)

   Drop this file into a project and reference tokens via var(--token).
   Optional font import (uncomment if you don't load fonts elsewhere):
   @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700;6..12,800&family=JetBrains+Mono:wght@400;500&display=swap');
   ============================================================================ */

:root {
  /* ========================================================================
     1. COLOUR
     Each brand/semantic hue has 4 roles:
       base   — solid fills, icons, primary CTAs
       -press — active/pressed (darker)
       -soft  — tinted backgrounds, chips, badges
       -ink   — text/icon colour for use ON -soft or on white (AA compliant)
     ======================================================================== */

  /* -- Primary · Harbour blue (brand, CTAs, progress, positive) -- */
  --c-primary:         #3C77C2;
  --c-primary-press:   #2E5E9E;
  --c-primary-soft:    #DEE9F7;
  --c-primary-ink:     #275086;

  /* -- Secondary · Apricot (warm accent, affirmative actions) -- */
  --c-secondary:       #F08A63;
  --c-secondary-press: #E0724A;
  --c-secondary-soft:  #FBE3D9;
  --c-secondary-ink:   #9A4A23;

  /* -- Accent · Muted gold (stars, rewards, highlights) -- */
  --c-accent:          #E3A93B;
  --c-accent-press:    #C8902A;
  --c-accent-soft:     #F8EDCF;
  --c-accent-ink:      #856310;

  /* -- Semantic · Success -- */
  --c-success:         #2DA86F;
  --c-success-soft:    #D8F0E3;
  --c-success-ink:     #0F6B45;

  /* -- Semantic · Warning -- */
  --c-warning:         #E0A32E;
  --c-warning-soft:    #F8ECCD;
  --c-warning-ink:     #876010;

  /* -- Semantic · Grace / mid-alert (orange) -- */
  --c-orange:          #E2722E;
  --c-orange-soft:     #F8E0D0;
  --c-orange-ink:      #A8430E;

  /* -- Semantic · Error / danger -- */
  --c-error:           #DC4B4F;
  --c-error-soft:      #F8DEDF;
  --c-error-ink:       #A81C20;

  /* -- Neutrals · cool grey -- */
  --bg:                #F4F7F9;  /* app background (cool off-white) */
  --bg-tint:           #E9EEF2;  /* sunken areas, tracks, placeholders */
  --surface:           #FFFFFF;  /* cards, sheets */
  --surface-2:         #F6F9FB;  /* nested cards / inset panels */
  --line:              #E2E8EC;  /* hairline borders, dividers */
  --line-strong:       #D2DBE1;  /* input borders, stronger dividers */

  /* -- Text -- */
  --ink:               #1E2A33;  /* primary text (cool slate-black) */
  --ink-2:             #5B6B76;  /* secondary / body-muted text */
  --ink-3:             #8A97A0;  /* tertiary / placeholder / captions */
  --ink-on-dark:       #F4F7F9;  /* text on dark surfaces */

  /* -- Dark surfaces (nav rail, overlays) -- */
  --night:             #1E2A33;
  --night-2:           #27343D;

  /* -- Friendly aliases (map the generic names onto the system) -- */
  --color-primary:     var(--c-primary);
  --color-secondary:   var(--c-secondary);
  --color-accent:      var(--c-accent);
  --color-background:  var(--bg);
  --color-surface:     var(--surface);
  --color-text:        var(--ink);
  --color-muted:       var(--ink-2);
  --color-subtle:      var(--ink-3);
  --color-border:      var(--line);
  --color-error:       var(--c-error);
  --color-success:     var(--c-success);
  --color-warning:     var(--c-warning);

  /* ========================================================================
     2. TYPOGRAPHY
     ======================================================================== */

  /* -- Font families -- */
  --font-display: 'Fredoka', system-ui, sans-serif;        /* headings, numerals, brand */
  --font-body:    'Nunito Sans', system-ui, sans-serif;    /* body, UI, forms */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;/* codes, answers, PINs */

  /* -- Font sizes (px) -- */
  --text-display:  30px;  /* page hero (dashboard greeting) */
  --text-h1:       26px;  /* screen titles, results */
  --text-h2:       22px;  /* large card titles */
  --text-h3:       20px;  /* section headings */
  --text-h4:       17px;  /* small headings, card names */
  --text-lg:       16px;  /* lead body, primary inputs, buttons */
  --text-base:     15px;  /* default body */
  --text-sm:       14px;  /* dense body, labels */
  --text-caption:  13px;  /* captions, helper text */
  --text-micro:    12px;  /* overlines, meta */

  /* -- Font weights -- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;   /* Fredoka display weight */
  --fw-bold:      700;
  --fw-extrabold: 800;   /* overlines, emphatic labels */

  /* -- Line heights -- */
  --lh-display:  1.08;   /* large display type */
  --lh-heading:  1.12;   /* headings */
  --lh-snug:     1.3;    /* sub-headings, tight blocks */
  --lh-body:     1.5;    /* paragraphs */

  /* -- Letter spacing -- */
  --ls-display:  -0.02em;
  --ls-heading:  -0.01em;
  --ls-normal:    0;
  --ls-overline:  0.08em;

  /* ========================================================================
     3. SPACING SCALE  (4px base grid)
     ======================================================================== */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;

  /* ========================================================================
     4. BORDER RADIUS
     ======================================================================== */
  --r-xs:    8px;   /* small tiles, swatches */
  --r-sm:   12px;   /* inputs (small), inner blocks */
  --r-md:   16px;   /* inputs, buttons, chips containers */
  --r-lg:   22px;   /* cards */
  --r-xl:   30px;   /* hero cards, question card */
  --r-2xl:  40px;   /* feature / celebration cards */
  --r-full: 999px;  /* pills, dots, avatars-as-circle */

  /* ========================================================================
     5. ELEVATION / SHADOWS  (cool-tinted)
     ======================================================================== */
  --e-1:   0 1px 2px rgba(30,42,51,.05), 0 1px 3px rgba(30,42,51,.07);   /* resting cards */
  --e-2:   0 2px 6px rgba(30,42,51,.06), 0 6px 16px rgba(30,42,51,.08);  /* raised / hover */
  --e-3:   0 8px 24px rgba(30,42,51,.09), 0 16px 40px rgba(30,42,51,.11);/* modals, hero */
  --e-pop: 0 12px 30px rgba(60,119,194,.26);                             /* primary CTA glow */

  /* ========================================================================
     6. MOTION
     ======================================================================== */
  --dur-fast:  .12s;
  --dur:       .15s;
  --dur-slow:  .3s;
  --ease:      cubic-bezier(.4, 0, .2, 1);

  /* ========================================================================
     7. COMPONENT TOKENS  (recurring composite values used across screens)
     ======================================================================== */

  /* Focus ring (inputs, interactive) */
  --focus-ring:        0 0 0 4px rgba(60,119,194,.15);
  --focus-ring-error:  0 0 0 4px rgba(220,75,79,.15);

  /* Form fields */
  --field-bg:           var(--surface);
  --field-radius:       var(--r-md);
  --field-border:       1.5px solid var(--line-strong);
  --field-border-focus: 1.5px solid var(--c-primary);
  --field-pad:          13px 15px;

  /* Cards */
  --card-bg:      var(--surface);
  --card-radius:  var(--r-lg);
  --card-border:  1px solid var(--line);
  --card-pad:     var(--s-6);

  /* Buttons */
  --btn-radius:   var(--r-md);
  --btn-pad:      13px 20px;

  /* Chips / badges / avatars */
  --chip-radius:    var(--r-full);
  --avatar-radius:  var(--r-lg);

  /* Reward / brand gradients */
  --gradient-streak: linear-gradient(135deg, #E3A93B, #F08A63);  /* gold → apricot (streak flame) */
  --gradient-xp:     linear-gradient(90deg, #6E7BE8, #3C77C2);   /* XP / level progress */
  --gradient-brand:  linear-gradient(150deg, #3C77C2, #2E5E9E);  /* app-icon tile */
  --gradient-kid-bg: linear-gradient(160deg, #E7EFFB 0%, #F4F7F9 45%, #FFF0E8 100%); /* kid app backdrop */
}