/* ============================================================
   COMO4KIDS — Colors & Type Foundations
   Hyperlocal kids + family hub for Columbia (CoMo), Missouri.
   Riso-zine neobrutalism, enhanced from the COMO AI "RISO Remix"
   single-ink system into a full multi-ink Riso palette.
   Load this first, then layer component CSS on top.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Caveat:wght@400;600;700&display=swap');

:root {
  /* ---------------------------------------------------------
     1. RISO INK PALETTE  (base color tokens)
     Each "ink" is a spot color the way a Risograph prints —
     flat, slightly fluorescent, layered. One ink owns each
     kid-friendly topic so the directory color-codes itself.
     --------------------------------------------------------- */

  /* Pink — the hero ink (kept + punched up from RISO Remix) */
  --pink:         #FF4F8B;
  --pink-light:   #FFE0EB;
  --pink-dark:    #D43D72;

  /* Marigold — sunny yellow ink (Music / sunshine) */
  --marigold:       #FFB627;
  --marigold-light: #FFEFC9;
  --marigold-dark:  #E09800;

  /* Teal — aqua-green ink (Outdoors / Nature / Water) */
  --teal:        #14A89B;
  --teal-light:  #CFEFEB;
  --teal-dark:   #0E8378;

  /* Blue — riso sky blue ink (STEM / Academics / Tech) */
  --blue:        #2D72D9;
  --blue-light:  #D6E4FB;
  --blue-dark:   #1F56AC;

  /* Tomato — orange-red ink (Sports / energy / alerts) */
  --tomato:        #FF5A36;
  --tomato-light:  #FFE0D6;
  --tomato-dark:   #D8401F;

  /* ---------------------------------------------------------
     2. NEUTRALS  (warm, never pure gray — Riso paper stock)
     --------------------------------------------------------- */
  --black:   #1F1810;   /* warm near-black ink + body text */
  --ink-70:  #4A4239;   /* secondary text on light */
  --muted:   #7A7067;   /* tertiary / meta text */
  --cream:   #FAF8F5;   /* primary paper stock background */
  --cream-2: #F2EEE7;   /* sunk panel / alt row */
  --white:   #FFFFFF;
  --rule:    rgba(31, 24, 16, 0.15);   /* hairline rule */
  --rule-2:  rgba(31, 24, 16, 0.08);   /* faint rule */

  /* ---------------------------------------------------------
     3. SEMANTIC COLOR ROLES
     --------------------------------------------------------- */
  --brand:        var(--pink);
  --brand-hover:  var(--pink-dark);
  --fg1:          var(--black);    /* primary foreground */
  --fg2:          var(--ink-70);   /* secondary foreground */
  --fg3:          var(--muted);    /* tertiary foreground */
  --bg1:          var(--cream);    /* primary surface */
  --bg2:          var(--white);    /* raised card surface */
  --bg-sunk:      var(--cream-2);  /* recessed surface */
  --bg-invert:    var(--black);    /* dark sections / featured cards */
  --fg-on-dark:   var(--white);
  --fg-on-dark-2: rgba(255,255,255,0.62);
  --link:         var(--pink);
  --link-hover:   var(--pink-dark);
  --focus-ring:   var(--pink-light);

  /* Status (built from the ink set, never new hues) */
  --ok:     var(--teal);
  --warn:   var(--marigold-dark);
  --danger: var(--tomato);
  --info:   var(--blue);

  /* Topic → ink map (kid-activity color coding) */
  --topic-arts:     var(--pink);
  --topic-stem:     var(--blue);
  --topic-sports:   var(--tomato);
  --topic-outdoors: var(--teal);
  --topic-music:    var(--marigold);
  --topic-academic: var(--blue-dark);

  /* ---------------------------------------------------------
     4. BORDERS, RADII, SHADOWS  (neobrutalist — flat + hard)
     --------------------------------------------------------- */
  --bd:        2px solid var(--black);   /* the signature border */
  --bd-thin:   1px solid var(--rule);
  --bd-accent: 4px solid var(--pink);    /* open/active left edge */

  --r-0: 0px;    /* default — Riso prints square */
  --r-1: 4px;    /* chips / tiny controls only */
  --r-2: 8px;    /* inputs, soft kid-friendly cards (sparingly) */
  --r-pill: 999px;

  /* Hard offset "sticker" shadows — no blur, pure offset */
  --sh-1: 3px 3px 0 var(--black);
  --sh-2: 4px 4px 0 var(--black);
  --sh-3: 6px 6px 0 var(--black);
  --sh-pink:    6px 6px 0 var(--pink);     /* pop accent shadow */
  --sh-pink-sm: 3px 3px 0 var(--pink-dark);
  --sh-lift-1:  4px 4px 0 var(--black);    /* hover target of sh-1 */
  --sh-lift-2:  6px 6px 0 var(--black);    /* hover target of sh-2 */

  /* ---------------------------------------------------------
     5. SPACING SCALE  (8px base rhythm)
     --------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;
  --section-y: 80px;          /* vertical padding for page sections */
  --wrap:       1200px;       /* standard content width */
  --wrap-tight: 960px;        /* prose / forms width */

  /* ---------------------------------------------------------
     6. TYPE — families, base + semantic
     --------------------------------------------------------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;  /* headlines + UI */
  --font-body:    "Space Grotesk", system-ui, sans-serif;  /* body copy */
  --font-hand:    "Caveat", "Comic Sans MS", cursive;      /* annotations only */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight: 1.05;   /* display wordmarks */
  --lh-snug:  1.2;    /* headlines */
  --lh-base:  1.6;    /* body */
  --lh-loose: 1.7;    /* long-form reading */

  --tracking-tight:  -0.03em;  /* big display */
  --tracking-snug:   -0.02em;  /* headlines */
  --tracking-normal: 0;
  --tracking-eyebrow: 0.12em;  /* uppercase eyebrows / labels */
}

/* ============================================================
   BASE ELEMENT DEFAULTS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg1);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--link-hover); }
img, svg { display: block; max-width: 100%; }

/* ============================================================
   SEMANTIC TYPE CLASSES
   Riso "misregistration" shadow on display type = the pink
   ghost edge (text-shadow: Xpx 0 0 pink). Use .riso-ghost.
   ============================================================ */

.display-xl {            /* giant hero wordmark */
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(64px, 10vw, 120px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.display-lg {            /* section hero / page title */
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 4.5vw, 54px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3vw, 34px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
}
.lede {
  font-size: 17px;
  line-height: var(--lh-loose);
  color: var(--fg2);
}
p, .body {
  font-size: 15px;
  line-height: var(--lh-base);
  color: var(--fg2);
}
.small { font-size: 13px; line-height: 1.5; }
.meta {
  font-size: 12px;
  font-weight: var(--fw-semi);
  color: var(--fg3);
}

/* Eyebrow / kicker — uppercase tracked label */
.eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg1);
}

/* Caveat handwritten annotation — personality layer */
.annotation {
  font-family: var(--font-hand);
  font-size: 20px;
  font-weight: var(--fw-semi);
  color: var(--pink);
  line-height: 1;
  display: inline-block;
}

/* Riso misregistration ghost edge for display text */
.riso-ghost   { text-shadow: 3px 0 0 rgba(255,79,139,0.5); }
.riso-ghost-2 { text-shadow: 2px 0 0 rgba(255,79,139,0.35); }

/* Strike-through "not this / but that" device */
s, .strike { text-decoration-line: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 3px; }