/* GiggleByte hybrid tokens. Base = proposed system v1.0 (light). Persona overrides below. */
:root{
  --surface: #FBF7F0;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F1EADF;
  --line: #DDD4C6;
  --line-strong: #8C8577;
  --ink: #1C2B33;
  --ink-muted: #53606A;
  --primary: #0B6E69;
  --primary-hover: #085450;
  --primary-soft: #FDF0D2; /* was mint #DDF1EE; soft gold = --secondary-soft */
  --on-primary: #FFFFFF;
  --primary-text: #085450;
  --secondary: #F4B740;
  --on-secondary: #1C2B33;
  --secondary-soft: #FDF0D2;
  --secondary-text: #8A5A00;
  --on-accent: #1C2B33;
  --success: #1D7044;
  --success-soft: #E3F4EA;
  --warning: #8A5A00;
  --warning-soft: #FFF1D6;
  --error: #B42318;
  --error-soft: #FDE8E6;
  --focus-ring: var(--primary);
  --giga: #2A8F87;
  --on-giga: #FBF7F0;
  --teen: #F4A97A;
  --on-teen: #1C2B33;
  --teen-soft: #FDEBDD;
  --teen-text: #A3471F;
  --parent: #2D6CB5;
  --on-parent: #FFFFFF;
  --parent-soft: #E1ECF8;
  --parent-text: #22558F;
  --senior: #F4B740;
  --on-senior: #1C2B33;
  --senior-soft: #FDF0D2;
  --senior-text: #8A5A00;

  --shadow-card: 0 1px 2px rgba(28,43,51,0.06), 0 6px 18px rgba(28,43,51,0.08);
  --shadow-lift: 0 2px 4px rgba(28,43,51,0.08), 0 14px 32px rgba(28,43,51,0.14);

  --font-logo: Nunito, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --text-root: 18px;            /* body floor: never smaller for paragraphs */
  --text-display-size: 56px;
  --text-display-line: 60px;
  --text-display-weight: 800;
  --text-display-tracking: -0.02em;
  --text-h1-size: 44px;
  --text-h1-line: 50px;
  --text-h1-weight: 800;
  --text-h1-tracking: -0.015em;
  --text-h2-size: 34px;
  --text-h2-line: 40px;
  --text-h2-weight: 700;
  --text-h2-tracking: -0.01em;
  --text-h3-size: 26px;
  --text-h3-line: 32px;
  --text-h3-weight: 700;
  --text-h4-size: 22px;
  --text-h4-line: 28px;
  --text-h4-weight: 700;
  --text-body-lg-size: 20px;
  --text-body-lg-line: 32px;
  --text-body-lg-weight: 400;
  --text-body-size: 18px;
  --text-body-line: 28px;
  --text-body-weight: 400;
  --text-body-strong-size: 18px;
  --text-body-strong-line: 28px;
  --text-body-strong-weight: 700;
  --text-label-size: 16px;
  --text-label-line: 24px;
  --text-label-weight: 700;
  --text-label-tracking: 0.01em;
  --text-caption-size: 16px;
  --text-caption-line: 24px;
  --text-caption-weight: 400;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --tap-target: 48px;
  --control-height: 56px;
  --content-max: 1200px;
  --measure: 68ch;
  --font-display: Nunito, "Arial Rounded MT Bold", system-ui, sans-serif;
  /* mascot peach stays peach (folds/mouths per guidelines) */
  --accent:#F4A97A; --on-accent:#1C2B33; --accent-soft:#FDEBDD; --accent-text:#A3471F;
  /* hybrid: brand accent with its own colour, distinct from teen peach */
  --brand:#6A4BD1; --brand-soft:#ECE6FB; --brand-text:#5236B0;
  --wordmark:#085450; /* never recoloured per persona */
  --sig-ink:#1C2B33; --sig-border:3px; --sig-offset:4px;
  --heading-weight:800; --border-w:1px; --duration:.15s;
}
:root[data-persona="teen"]{
  /* Teen = dark world. Values match persona.css (source of truth): dark #121417, accent #FF9F6B, lime #C6FF4D.
     #F4A97A stays the mascot peach (--mascot-accent) and the light-theme Teens chip (--teen), never the Teen UI accent. */
  --surface:#121417; --surface-raised:#1D2026; --surface-sunken:#0B0D10;
  --ink:#F5F2EA; --ink-muted:#B9BEC7; --line:#F5F2EA; --line-strong:#9AA1AC;
  --primary:#FF9F6B; --primary-hover:#FFB48A; --on-primary:#121417;
  --primary-soft:#3B2A20; --primary-text:#FFB48A; --focus-ring:#C6FF4D;
  --teen-lime:#C6FF4D;
  --sig-border:4px; --sig-offset:6px; --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --heading-weight:900; --border-w:3px;
  --shadow-card:6px 6px 0 #C6FF4D; --shadow-lift:9px 9px 0 #C6FF4D;
}
:root[data-persona="parent"]{ /* = base tokens */ }
:root[data-persona="senior"]{
  --primary:#F4B740; --primary-hover:#E8A820; --on-primary:#1C2B33;
  --primary-soft:#FDF0D2; --primary-text:#704700; --focus-ring:#1C2B33;
  --ink:#111A1F; --ink-muted:#333E45; --line:#8C8577; --line-strong:#1C2B33;
  --text-body-size:22px; --text-body-line:34px; --text-label-size:20px; --text-label-line:28px;
  --text-caption-size:19px; --text-caption-line:28px; --text-body-lg-size:24px; --text-body-lg-line:36px;
  --control-height:64px; --tap-target:56px; --border-w:2px; --duration:0s;
}
@media (prefers-reduced-motion: reduce){ :root{ --duration:0s; } }
/* Mascots: fixed original colours in every persona (never override per theme) */
:root{--mascot-mega:#0B6E69;--mascot-mega-face:#FFFFFF;--mascot-body:#2A8F87;--mascot-face:#FBF7F0;--mascot-accent:#F4A97A}