Curriculum — Acid Course

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F2ED94"
    foreground: "#0F1A04"
    card: "#F5F098"
    card-foreground: "#0F1A04"
    popover: "#FAF997"
    popover-foreground: "#0F1A04"
    primary: "#0F1A04"
    primary-foreground: "#F2ED94"
    secondary: "#58C747"
    secondary-foreground: "#0F1A04"
    muted: "#E8E47C"
    muted-foreground: "#3D4D10"
    accent: "#EF6A4B"
    accent-foreground: "#0F1A04"
    destructive: "#D93B1A"
    destructive-foreground: "#FFFFFF"
    border: "#CBC83E"
    input: "#E8E47C"
    ring: "#58C747"
    success: "#234A1E"
    success-foreground: "#F2ED94"
    warning: "#EF6A4B"
    warning-foreground: "#0F1A04"
    chart-1: "#58C747"
    chart-2: "#EF6A4B"
    chart-3: "#5A7EB0"
    chart-4: "#234A1E"
    chart-5: "#7AA8E9"
  palette:
    - { name: "acid-yellow", hex: "#f2ed94", role: "surface-primary" }
    - { name: "grass-green", hex: "#58c747", role: "surface-secondary" }
    - { name: "pale-lime", hex: "#f5f096", role: "surface-tint" }
    - { name: "deep-lemon", hex: "#efea93", role: "surface-tint" }
    - { name: "near-black", hex: "#0f1a04", role: "ink" }
    - { name: "coral-orange", hex: "#ef6a4b", role: "accent" }
    - { name: "dark-forest", hex: "#234a1e", role: "surface-deep" }
    - { name: "shopify-blue", hex: "#5a7eb0", role: "data-viz" }
    - { name: "sky-blue", hex: "#7aa8e9", role: "data-viz" }
    - { name: "bright-lime", hex: "#61d94f", role: "data-viz" }
    - { name: "slate-lavender", hex: "#bec1d6", role: "data-viz" }
    - { name: "warm-gray", hex: "#c8c0bc", role: "neutral" }
    - { name: "dark-olive", hex: "#474830", role: "neutral-dark" }
    - { name: "muted-yellow-green", hex: "#c3d27a", role: "neutral-accent" }
    - { name: "muted-green", hex: "#45a836", role: "surface-muted" }
    - { name: "border-yellow", hex: "#cbc83e", role: "border" }
    - { name: "border-green", hex: "#3a9228", role: "border" }
    - { name: "dark-green-muted", hex: "#163810", role: "ink-secondary" }
typography:

/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Barlow%20Condensed:wght@400;500;600;700&family=DM%20Sans:wght@400;500;700&family=Space%20Mono:wght@400;700&display=swap");

:root {
  --radius: 0.375rem;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 57 78% 76%;
  --foreground: 90 73% 6%;
  --card: 57 82% 78%;
  --card-foreground: 90 73% 6%;
  --popover: 59 91% 79%;
  --popover-foreground: 90 73% 6%;
  --primary: 90 73% 6%;
  --primary-foreground: 57 78% 76%;
  --secondary: 112 53% 53%;
  --secondary-foreground: 90 73% 6%;
  --muted: 58 70% 70%;
  --muted-foreground: 76 66% 18%;
  --accent: 11 84% 62%;
  --accent-foreground: 90 73% 6%;
  --destructive: 10 79% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 59 58% 52%;
  --input: 58 70% 70%;
  --ring: 112 53% 53%;
  --success: 113 42% 20%;
  --success-foreground: 57 78% 76%;
  --warning: 11 84% 62%;
  --warning-foreground: 90 73% 6%;
  --chart-1: 112 53% 53%;
  --chart-2: 11 84% 62%;
  --chart-3: 215 35% 52%;
  --chart-4: 113 42% 20%;
  --chart-5: 215 72% 70%;
  --shadow-sm: none;
  --shadow-md: 0 1px 3px rgba(15,26,4,0.07);
  --shadow-lg: 0 2px 6px rgba(15,26,4,0.09);
  --shadow-xl: 0 4px 12px rgba(15,26,4,0.11);
  --gradient-hero: linear-gradient(180deg, #f2ed94 0%, #58c747 100%);
  --gradient-brand: linear-gradient(135deg, #f2ed94 50%, #e8e47c 100%);
  --gradient-subtle: linear-gradient(180deg, #faf997 0%, #f2ed94 100%);
  --duration: 120ms;
  --duration-slow: 280ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 800;
  --font-weight-body: 400;
  --button-radius: 0.25rem;
  --card-radius: 0rem;
  --input-radius: 0.25rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: uppercase;