/* ============================================================
   edulab — Colors & Type foundation
   Fonts loaded from Google Fonts (CDN). See README "Visual
   Foundations" for substitution notes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---- Brand fonts ---- */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     RAW COLOR TOKENS
     ============================================================ */

  /* Paper — warm cream backgrounds (the brand never sits on pure white) */
  --paper:    #FBF7F0;   /* page background            */
  --paper-2:  #F4EDDF;   /* alternating section        */
  --paper-3:  #ECE1CF;   /* deepest cream / wells      */
  --surface:  #FFFFFF;   /* cards & sheets             */

  /* Ink — warm near-black text & lines */
  --ink:      #211E1A;   /* primary text               */
  --ink-2:    #5B554D;   /* secondary text             */
  --ink-3:    #938A7C;   /* muted / placeholder        */
  --line:     #E7DCCB;   /* hairline borders           */
  --line-2:   #D6C8B2;   /* stronger borders           */

  /* Marigold — primary brand */
  --marigold:      #E8920C;
  --marigold-600:  #CE800A;  /* hover / press          */
  --marigold-soft: #FBE7C2;  /* tint background        */
  --marigold-ink:  #8A4F00;  /* text on soft tint      */

  /* Teal — secondary brand */
  --teal:      #0E8C7F;
  --teal-600:  #0B7468;
  --teal-soft: #D2EBE6;
  --teal-ink:  #0A5A52;

  /* Coral — accent (use sparingly, for emphasis/CTAs) */
  --coral:      #EF5B3F;
  --coral-600:  #D44A30;
  --coral-soft: #FBDDD4;
  --coral-ink:  #9A2E1B;

  /* Sky — supportive, used in the learning app categories */
  --sky:      #2E78C9;
  --sky-soft: #D9E7F6;
  --sky-ink:  #1B4E88;

  /* Play palette — subject/category colours in the kids app */
  --play-sun:    #F2A516;
  --play-grass:  #4FA45C;
  --play-berry:  #C6478B;
  --play-grape:  #7A5AC2;
  --play-sky:    #2E78C9;
  --play-coral:  #EF5B3F;

  /* ---- Semantic ---- */
  --success:      #2F8F5B;  --success-soft: #D7EEDD;  --success-ink: #1C6A3E;
  --warning:      #C9810A;  --warning-soft: #FBEAC6;  --warning-ink: #855207;
  --danger:       #D8412A;  --danger-soft:  #FAD9D2;  --danger-ink:  #97271A;
  --info:         #2E78C9;  --info-soft:    #D9E7F6;  --info-ink:    #1B4E88;

  /* ---- Functional aliases ---- */
  --bg:        var(--paper);
  --fg:        var(--ink);
  --fg-muted:  var(--ink-2);
  --primary:   var(--marigold);
  --on-primary:#FFFFFF;
  --focus-ring: 0 0 0 3px rgba(232,146,12,.38);

  /* ============================================================
     SPACING  (4pt base)
     ============================================================ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- Radii (friendly, generous) ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- Elevation — warm, low, soft ---- */
  --shadow-sm: 0 1px 2px rgba(33,30,26,.06), 0 1px 1px rgba(33,30,26,.04);
  --shadow-md: 0 4px 16px rgba(33,30,26,.08), 0 1px 3px rgba(33,30,26,.05);
  --shadow-lg: 0 16px 40px rgba(33,30,26,.12), 0 3px 8px rgba(33,30,26,.06);
  --shadow-marigold: 0 8px 22px rgba(232,146,12,.28);

  /* ============================================================
     TYPE SCALE (semantic sizes)
     ============================================================ */
  --display-font:  clamp(48px, 6vw, 72px);
  --h1: 44px; --h2: 33px; --h3: 25px; --h4: 19px;
  --body-lg: 18px; --body: 16px; --body-sm: 14px;
  --caption: 13px; --overline: 12px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply via element selectors or .edu-prose wrapper.
   ============================================================ */

.edu-display, .edu h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-font);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.edu h1, .edu-h1 {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--h1);
  line-height: 1.06; letter-spacing: -0.02em; color: var(--ink);
}
.edu h2, .edu-h2 {
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--h2);
  line-height: 1.12; letter-spacing: -0.015em; color: var(--ink);
}
.edu h3, .edu-h3 {
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--h3);
  line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
}
.edu h4, .edu-h4 {
  font-family: var(--font-sans);
  font-weight: 700; font-size: var(--h4);
  line-height: 1.3; color: var(--ink);
}
.edu p, .edu-p, .edu-body {
  font-family: var(--font-sans);
  font-weight: 400; font-size: var(--body);
  line-height: 1.6; color: var(--ink-2);
}
.edu-body-lg { font-family: var(--font-sans); font-size: var(--body-lg); line-height: 1.6; color: var(--ink-2); }
.edu-small  { font-family: var(--font-sans); font-size: var(--body-sm); line-height: 1.5; color: var(--ink-2); }
.edu-caption{ font-family: var(--font-sans); font-size: var(--caption); line-height: 1.45; color: var(--ink-3); }

/* Overline / eyebrow — mono, tracked, the "lab" voice */
.edu-overline {
  font-family: var(--font-mono);
  font-weight: 500; font-size: var(--overline);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--marigold-ink);
}
.edu code, .edu-mono {
  font-family: var(--font-mono);
  font-size: 0.92em; color: var(--ink);
  background: var(--paper-3); padding: 0.12em 0.4em; border-radius: var(--r-xs);
}

body.edu { background: var(--paper); color: var(--ink); font-family: var(--font-sans); }