Pastel Curriculum

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F2F4FA"
    foreground: "#1C1A2E"
    card: "#FFFFFF"
    card-foreground: "#1C1A2E"
    popover: "#FFFFFF"
    popover-foreground: "#1C1A2E"
    primary: "#FE7C5E"
    primary-foreground: "#1C1A2E"
    secondary: "#F2ABD2"
    secondary-foreground: "#1C1A2E"
    muted: "#E8EFFA"
    muted-foreground: "#4A4758"
    accent: "#ECE886"
    accent-foreground: "#1C1A2E"
    destructive: "#D63C3C"
    destructive-foreground: "#FFFFFF"
    border: "#D4DCE8"
    input: "#D4DCE8"
    ring: "#FE7C5E"
    success: "#1F8A4A"
    success-foreground: "#000000"
    warning: "#F5A623"
    warning-foreground: "#1C1A2E"
    chart-1: "#FE7C5E"
    chart-2: "#F2ABD2"
    chart-3: "#B0CFEA"
    chart-4: "#ECE886"
    chart-5: "#C8A4D4"
  palette:
    - { name: "page-canvas", hex: "#f2f4fa", role: "surface" }
    - { name: "page-canvas-alt", hex: "#eff2f6", role: "surface" }
    - { name: "coral-orange", hex: "#fe7c5e", role: "brand" }
    - { name: "soft-pink", hex: "#f2abd2", role: "brand" }
    - { name: "periwinkle-blue", hex: "#b0cfea", role: "brand" }
    - { name: "warm-yellow", hex: "#ece886", role: "brand" }
    - { name: "ink-dark", hex: "#1c1a2e", role: "ink" }
    - { name: "script-gold", hex: "#c4a832", role: "decorative" }
    - { name: "medium-grey", hex: "#686370", role: "neutral" }
    - { name: "soft-border", hex: "#d4dce8", role: "border" }
    - { name: "light-muted", hex: "#e8effa", role: "surface" }
    - { name: "deep-dark", hex: "#18162a", role: "surface-dark" }
    - { name: "dark-card", hex: "#242236", role: "surface-dark" }
    - { name: "soft-purple", hex: "#c8a4d4", role: "data-viz" }
    - { name: "coral-vibrant", hex: "#fa7b5d", role: "data-viz" }
    - { name: "yellow-vibrant", hex: "#eceb86", role: "data-viz" }
    - { name: "dark-muted", hex: "#42453b", role: "neutral" }
    - { name: "light-muted-warm", hex: "#d3bdac", role: "neutral" }
typography:

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

:root {
  --radius: 1rem;
  --font-heading: 'Raleway', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 225 44% 96%;
  --foreground: 246 28% 14%;
  --card: 0 0% 100%;
  --card-foreground: 246 28% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 246 28% 14%;
  --primary: 11 99% 68%;
  --primary-foreground: 246 28% 14%;
  --secondary: 327 73% 81%;
  --secondary-foreground: 246 28% 14%;
  --muted: 217 64% 95%;
  --muted-foreground: 251 11% 31%;
  --accent: 58 73% 73%;
  --accent-foreground: 246 28% 14%;
  --destructive: 0 65% 54%;
  --destructive-foreground: 0 0% 100%;
  --border: 216 30% 87%;
  --input: 216 30% 87%;
  --ring: 11 99% 68%;
  --success: 144 63% 33%;
  --success-foreground: 0 0% 0%;
  --warning: 37 91% 55%;
  --warning-foreground: 246 28% 14%;
  --chart-1: 11 99% 68%;
  --chart-2: 327 73% 81%;
  --chart-3: 208 58% 80%;
  --chart-4: 58 73% 73%;
  --chart-5: 285 36% 74%;
  --shadow-sm: 0 1px 2px rgba(28,26,46,0.05);
  --shadow-md: 0 2px 8px rgba(28,26,46,0.08);
  --shadow-lg: 0 4px 16px rgba(28,26,46,0.10);
  --shadow-xl: 0 8px 32px rgba(28,26,46,0.12);
  --gradient-hero: linear-gradient(135deg,#f2abd2 0%,#fe7c5e 50%,#ece886 100%);
  --gradient-brand: linear-gradient(90deg,#fe7c5e 0%,#f2abd2 100%);
  --gradient-subtle: linear-gradient(180deg,#f2f4fa 0%,#e8effa 100%);
  --duration: 200ms;
  --duration-slow: 420ms;
  --ease: cubic-bezier(0.34,1.56,0.64,1);
  --tracking-tight: 0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 800;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 1rem;
  --input-radius: 0.5rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 0;
  --heading-transform: uppercase;