/* tokens/typography.css */
/* Wisdom Kids — Typography tokens.
   No brand font files were provided; Google Fonts substitutes (flagged in readme.md):
   - Display: "Baloo 2" — round, chubby, kid-friendly; echoes the logo's rounded forms
   - Body: "Nunito" — rounded terminals, highly legible
   - Chinese display: "ZCOOL KuaiLe" — playful, matches Baloo's energy
   - Chinese body: "Noto Sans SC"
   Latin fonts stay FIRST in the zh stacks: Baloo 2 / Nunito carry no CJK glyphs,
   so Chinese falls through to ZCOOL / Noto while English words keep the same face in every language. */


:root {
  --font-display: 'Baloo 2', 'ZCOOL KuaiLe', 'Noto Sans SC', system-ui, sans-serif;
  --font-body: 'Nunito', 'Noto Sans SC', system-ui, sans-serif;
  --font-zh-display: 'Baloo 2', 'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif;
  --font-zh-body: 'Nunito', 'Noto Sans SC', sans-serif;

  /* Scale — marketing site (1.25 ratio, generous) */
  --text-hero: 64px;        /* hero headline */
  --text-display: 44px;     /* section headline */
  --text-title: 32px;       /* card group / page title */
  --text-heading: 24px;     /* card heading */
  --text-subheading: 19px;  /* lead paragraph, nav */
  --text-base: 16px;        /* body */
  --text-small: 14px;       /* captions, meta */
  --text-tiny: 12px;        /* legal, badges */

  --leading-display: 1.08;
  --leading-heading: 1.2;
  --leading-body: 1.6;

  --weight-display: 700;    /* Baloo 2 bold for all display */
  --weight-heavy: 800;
  --weight-semibold: 600;
  --weight-body: 400;

  --tracking-display: 0;
  --tracking-caps: 0.08em;  /* for small ALL-CAPS eyebrows */
}

/* tokens/colors.css */
/* Wisdom Kids — Color tokens. Sampled from logo badge + mascot artwork. */
:root {
  /* Pine — primary brand green (logo ring, uniforms) */
  --wk-pine-900: #072D19;
  --wk-pine-800: #0A3F23;
  --wk-pine-700: #0F512D;
  --wk-pine-600: #17603A;
  --wk-pine-500: #1E7247;

  /* Kelly — vivid green (skateboard) */
  --wk-kelly-500: #0C9045;

  /* Leaf — bright playful green (turtle skin, leaf) */
  --wk-leaf-600: #55A32F;
  --wk-leaf-500: #6CB645;
  --wk-leaf-400: #8CC85C;
  --wk-leaf-300: #ACD44E;
  --wk-leaf-100: #E4F2CE;
  --wk-leaf-50:  #F3F9E8;

  /* Accents */
  --wk-red-500:  #D6404F;   /* book red / Chinese seal red */
  --wk-red-600:  #BC2F3E;
  --wk-pink-500: #EE5D77;   /* Tory bow */
  --wk-pink-400: #FC7282;
  --wk-pink-300: #F9A0B4;
  --wk-pink-100: #FDE4E9;
  --wk-navy-700: #1E3A66;   /* Torby name badge */
  --wk-navy-800: #16294A;
  --wk-sky-500:  #3D9BE9;   /* backpack blue */
  --wk-sky-600:  #2B7FCB;
  --wk-sky-100:  #E0F0FC;
  --wk-sun-500:  #F4B62E;   /* star gold */
  --wk-sun-400:  #F9C846;
  --wk-sun-100:  #FDF0CB;
  --wk-butter-200: #FAF07D; /* turtle shell */

  /* Ink + neutrals (green-cast, never pure gray) */
  --wk-ink-900: #1B2A20;
  --wk-ink-700: #3A4A3F;
  --wk-ink-500: #5D6E62;
  --wk-ink-300: #9CAA9F;
  --wk-line-200: #DCE6DA;
  --wk-paper-0: #FFFFFF;
  --wk-cream-50: #FFFBF0;   /* warm page background */
  --wk-mint-50:  #F3F9EC;   /* green-tint section background */

  /* Semantic aliases */
  --color-brand: var(--wk-pine-700);
  --color-brand-strong: var(--wk-pine-800);
  --color-accent: var(--wk-leaf-500);
  --color-cta: var(--wk-sun-400);
  --color-danger: var(--wk-red-500);
  --text-heading: var(--wk-pine-800);
  --text-body: var(--wk-ink-700);
  --text-muted: var(--wk-ink-500);
  --text-on-brand: #FFFFFF;
  --text-zh-accent: var(--wk-red-500);
  --surface-page: var(--wk-cream-50);
  --surface-card: var(--wk-paper-0);
  --surface-tint: var(--wk-mint-50);
  --surface-brand: var(--wk-pine-700);
  --border-card: var(--wk-line-200);
  --focus-ring: var(--wk-sky-500);
}

/* tokens/spacing.css */
/* Wisdom Kids — Spacing, radii, shadows, motion. */
:root {
  /* 4px base grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Corner radii — generous and round, never sharp */
  --radius-sm: 10px;    /* inputs, tags */
  --radius-md: 16px;    /* small cards, images */
  --radius-lg: 24px;    /* cards, panels */
  --radius-xl: 32px;    /* hero blocks, feature panels */
  --radius-pill: 999px; /* buttons, badges, chips */

  /* Shadows — soft, warm, low-contrast; no harsh drops */
  --shadow-card: 0 2px 6px rgba(15, 81, 45, 0.06), 0 10px 24px rgba(15, 81, 45, 0.08);
  --shadow-card-hover: 0 4px 10px rgba(15, 81, 45, 0.10), 0 16px 32px rgba(15, 81, 45, 0.12);
  --shadow-pop: 0 20px 48px rgba(27, 42, 32, 0.18);
  --shadow-button: 0 3px 0 rgba(10, 63, 35, 0.9); /* playful "pressable" hard shadow */

  /* Borders */
  --border-thin: 1px solid var(--wk-line-200);
  --border-brand: 2px solid var(--wk-pine-700);

  /* Motion — springy but brief */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */

  /* Layout */
  --container-max: 1120px;
  --section-pad-y: var(--space-20);
}

/* tokens/base.css */
/* Wisdom Kids — minimal base element styles for consumers. */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-heading);
  margin: 0;
}
:lang(zh) { font-family: var(--font-zh-body); }
h1:lang(zh), h2:lang(zh), h3:lang(zh) { font-family: var(--font-zh-display); }
a { color: var(--wk-pine-600); }
::selection { background: var(--wk-leaf-100); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }