Ambient Sage

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F3F4EF"
    foreground: "#1A1C17"
    card: "#E5E6E0"
    card-foreground: "#1A1C17"
    popover: "#ECEDE7"
    popover-foreground: "#1A1C17"
    primary: "#FEE951"
    primary-foreground: "#1A1C17"
    secondary: "#E5E6E0"
    secondary-foreground: "#3C3C38"
    muted: "#ECEEE8"
    muted-foreground: "#545651"
    accent: "#F7E464"
    accent-foreground: "#1A1C17"
    destructive: "#C0392B"
    destructive-foreground: "#FFFFFF"
    border: "#D8D9D2"
    input: "#E5E6E0"
    ring: "#FEE951"
    success: "#2D7238"
    success-foreground: "#FFFFFF"
    warning: "#C97D12"
    warning-foreground: "#1A1C17"
    chart-1: "#FEE951"
    chart-2: "#4A8FD4"
    chart-3: "#6BBF8A"
    chart-4: "#E07498"
    chart-5: "#E8A24B"
  palette:
    - { name: "vivid-yellow", hex: "#fee951", role: "primary-accent" }
    - { name: "light-yellow", hex: "#f7e464", role: "accent-secondary" }
    - { name: "off-white-sage", hex: "#f3f4ef", role: "background" }
    - { name: "sage-card", hex: "#e5e6e0", role: "surface" }
    - { name: "sage-popover", hex: "#ecede7", role: "surface-elevated" }
    - { name: "sage-muted", hex: "#eceee8", role: "surface-muted" }
    - { name: "near-black", hex: "#1a1c17", role: "foreground" }
    - { name: "charcoal", hex: "#3c3c38", role: "ui-strong" }
    - { name: "mid-sage", hex: "#545651", role: "foreground-muted" }
    - { name: "border-sage", hex: "#d8d9d2", role: "border" }
    - { name: "dark-background", hex: "#1a1c17", role: "dark-surface" }
    - { name: "dark-card", hex: "#242620", role: "dark-surface" }
    - { name: "dark-popover", hex: "#2b2d27", role: "dark-surface" }
    - { name: "dark-secondary", hex: "#2f3129", role: "dark-surface" }
    - { name: "dark-border", hex: "#35372e", role: "dark-border" }
    - { name: "dark-muted-fg", hex: "#8a8c85", role: "dark-foreground-muted" }
    - { name: "dark-fg", hex: "#e3e4dc", role: "dark-foreground" }
    - { name: "destructive-red", hex: "#c0392b", role: "destructive" }
    - { name: "destructive-red-dark", hex: "#cc3333", role: "destructive" }

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

:root {
  --radius: 1.25rem;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 72 19% 95%;
  --foreground: 84 10% 10%;
  --card: 70 11% 89%;
  --card-foreground: 84 10% 10%;
  --popover: 70 14% 92%;
  --popover-foreground: 84 10% 10%;
  --primary: 53 99% 66%;
  --primary-foreground: 84 10% 10%;
  --secondary: 70 11% 89%;
  --secondary-foreground: 60 3% 23%;
  --muted: 80 15% 92%;
  --muted-foreground: 84 3% 33%;
  --accent: 52 90% 68%;
  --accent-foreground: 84 10% 10%;
  --destructive: 6 63% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 69 8% 84%;
  --input: 70 11% 89%;
  --ring: 53 99% 66%;
  --success: 130 43% 31%;
  --success-foreground: 0 0% 100%;
  --warning: 35 84% 43%;
  --warning-foreground: 84 10% 10%;
  --chart-1: 53 99% 66%;
  --chart-2: 210 62% 56%;
  --chart-3: 142 40% 58%;
  --chart-4: 340 64% 67%;
  --chart-5: 33 77% 60%;
  --shadow-sm: none;
  --shadow-md: 0 1px 4px rgba(26,28,23,0.06);
  --shadow-lg: 0 2px 12px rgba(26,28,23,0.08);
  --shadow-xl: 0 4px 24px rgba(26,28,23,0.10);
  --gradient-hero: linear-gradient(180deg,#f3f4ef 0%,#eceee8 100%);
  --gradient-brand: radial-gradient(circle at 62% 38%,#fee951 0%,#f7e464 55%,#f3f4ef 100%);
  --gradient-subtle: linear-gradient(135deg,#f3f4ef 0%,#e5e6e0 100%);
  --duration: 180ms;
  --duration-slow: 320ms;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 0.75rem;
  --card-radius: 1.25rem;
  --input-radius: 0.75rem;
  --badge-radius: 9999px;
  --border-width: 0px;
  --card-border-width: 0px;
  --input-border-width: 0px;
  --button-border-width: 0px;
  --badge-border-width: 0px;
  --heading-transform: none;