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


:root {
  /* ---- Brand fonts ---- */
  --font-display: 'Outfit', 'IBM Plex Sans', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

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

  /* Paper - page background is white; the sand steps are wells/alternating sections */
  --paper:    #FFFFFF;   /* page background (white)    */
  --paper-2:  #F5F3F0;   /* alternating section        */
  --paper-3:  #EAE6E0;   /* deepest sand / wells       */
  --surface:  #FFFFFF;   /* cards & sheets             */

  /* Ink - warm near-black text & lines */
  --ink:      #1C1917;   /* primary text               */
  --ink-2:    #44403C;   /* secondary text             */
  --ink-3:    #625B53;   /* muted / placeholder        */
  --line:     #E0DBD3;   /* hairline borders           */
  --line-2:   #C9C2B7; --line-strong: #857C69; /* control borders >= 3:1 */ --track: color-mix(in srgb, var(--ink) 24%, transparent);   /* stronger borders           */

  /* ---- Brand: Yellow main · Blue + Green secondary · Red danger ----
     Plain saturated colours. A "-soft" tint IS the saturated colour
     (panels and chips are solid), "-ink" is the text colour ON it:
     white on blue/green/red, dark ink on yellow. Never colour-on-colour
     (no green text on green); the saturated colour itself goes only on
     white or black. */

  /* Yellow - primary (buttons, progress, values on dark panels) */
  --yellow:      #FFD500;
  --yellow-600:  #F0C800;  /* hover / press          */
  --yellow-soft: #FFD500;  /* chip / panel fill      */
  --yellow-ink:  #1C1917;  /* text on yellow         */

  /* Blue - secondary (panels, chips, correct / selected state) */
  --blue:      #1E8FC2;
  --blue-600:  #177AA8;
  --blue-soft: #177AA8;
  --blue-ink:  #FFFFFF;

  /* Green - secondary support (chips, success) */
  --green:      #00A651;
  --green-600:  #078342;
  --green-soft: #078342;
  --green-ink:  #FFFFFF;

  /* Red - danger / important / wrong (use sparingly) */
  --red:      #E5322D;
  --red-600:  #C92823;
  --red-soft: #C92823;
  --red-ink:  #FFFFFF;

  /* Legacy role aliases - older edulab apps use these names */
  --marigold: var(--yellow); --marigold-600: var(--yellow-600); --marigold-soft: var(--yellow-soft); --marigold-ink: var(--yellow-ink);
  --teal:     var(--blue);   --teal-600:     var(--blue-600);   --teal-soft:     var(--blue-soft);   --teal-ink:     var(--blue-ink);
  --sky:      var(--green);                                     --sky-soft:      var(--green-soft);  --sky-ink:      var(--green-ink);
  --coral:    var(--red);    --coral-600:    var(--red-600);    --coral-soft:    var(--red-soft);    --coral-ink:    var(--red-ink);

  /* Play palette - subject/category colours in the kids app */
  --play-sun:    #FFD500;
  --play-grass:  #00A651;
  --play-berry:  #C6478B;
  --play-grape:  #7A5AC2;
  --play-sky:    #1E8FC2;
  --play-coral:  #E5322D;

  /* ---- Semantic ---- */
  --success:      #00A651;  --success-soft: #078342;  --success-ink: #FFFFFF;
  --warning:      #FFD500;  --warning-soft: #FFD500;  --warning-ink: #1C1917;
  --danger:       #E5322D;  --danger-soft:  #C92823;  --danger-ink:  #FFFFFF;
  --info:         #1E8FC2;  --info-soft:    #177AA8;  --info-ink:    #FFFFFF;

  /* ---- Functional aliases ---- */
  --bg:        var(--paper);
  --fg:        var(--ink);
  --fg-muted:  var(--ink-2);
  --primary:   var(--yellow);
  --on-primary:#1C1917;      /* dark text on yellow */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--ink);

  /* ============================================================
     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,.10), 0 2px 6px rgba(33,30,26,.06);
  --shadow-md: 0 6px 18px rgba(33,30,26,.12), 0 1px 3px rgba(33,30,26,.08);
  --shadow-lg: 0 16px 40px rgba(33,30,26,.12), 0 3px 8px rgba(33,30,26,.06);
  --shadow-primary:  0 8px 22px color-mix(in srgb, var(--yellow) 30%, transparent);
  --shadow-marigold: var(--shadow-primary);   /* legacy alias */

  /* ============================================================
     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 - mono, tracked; functional labels only (never above page/section titles) */
.edu-overline {
  font-family: var(--font-mono);
  font-weight: 500; font-size: var(--overline);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--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);
}

/* Solid colour blocks (callouts, stat cards, chips): set background: var(--X-soft) and
   color: var(--X-ink) on the block, add .edu-block, and every heading/paragraph inside
   inherits that text colour instead of the default ink. */
.edu-block, .edu-block h1, .edu-block h2, .edu-block h3, .edu-block h4, .edu-block p,
.edu-block li, .edu-block small { color: inherit; }

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