California Retro — 70s·80s Spirit

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F5E1C6"
    foreground: "#1A2218"
    card: "#EDD4AA"
    card-foreground: "#1A2218"
    popover: "#EDD4AA"
    popover-foreground: "#1A2218"
    primary: "#CB5331"
    primary-foreground: "#000000"
    secondary: "#293A2A"
    secondary-foreground: "#F5E1C6"
    muted: "#E6CDA0"
    muted-foreground: "#5A4A35"
    accent: "#F4B247"
    accent-foreground: "#1A2218"
    destructive: "#B52D1A"
    destructive-foreground: "#FFFFFF"
    border: "#C5A882"
    input: "#E6CDA0"
    ring: "#CB5331"
    success: "#2D6A4F"
    success-foreground: "#FFFFFF"
    warning: "#E8A030"
    warning-foreground: "#1A2218"
    chart-1: "#CB5331"
    chart-2: "#F4B247"
    chart-3: "#293A2A"
    chart-4: "#DFAF91"
    chart-5: "#AC6454"
  palette:
    - { name: "forest-green", hex: "#293a2a", role: "background-dark" }
    - { name: "terracotta", hex: "#cb5331", role: "primary" }
    - { name: "cream-parchment", hex: "#f5e1c6", role: "background-light" }
    - { name: "amber-gold", hex: "#f4b247", role: "accent" }
    - { name: "dark-olive", hex: "#374534", role: "shadow" }
    - { name: "light-peach", hex: "#dfaf91", role: "data-viz" }
    - { name: "muted-coral", hex: "#ac6454", role: "muted" }
    - { name: "warm-tan", hex: "#cbae7c", role: "border" }
    - { name: "dark-muted-brown", hex: "#594c32", role: "muted-dark" }
    - { name: "light-muted-parchment", hex: "#d1c2a5", role: "surface-muted" }
    - { name: "sage-teal", hex: "#acc9c0", role: "data-viz" }
    - { name: "forest-deep", hex: "#1e2c1f", role: "card-dark" }
    - { name: "muted-forest", hex: "#2d4530", role: "muted-surface" }
    - { name: "terracotta-dark", hex: "#ab4e33", role: "primary-shade" }
    - { name: "rust-red", hex: "#c84b26", role: "destructive" }
    - { name: "cream-lightest", hex: "#f9ebd0", role: "background-lightest" }
    - { name: "near-black-green", hex: "#1a2218", role: "ink" }
    - { name: "forest-mid", hex: "#3d5c3f", role: "secondary-dark" }
    - { name: "amber-muted", hex: "#e8a030", role: "warning" }

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

:root {
  --radius: 0.5rem;
  --font-heading: 'Bebas Neue', sans-serif;
  --font-sans: 'Lora', serif;
  --font-mono: 'Space Mono', monospace;
  --background: 34 70% 87%;
  --foreground: 108 17% 11%;
  --card: 38 65% 80%;
  --card-foreground: 108 17% 11%;
  --popover: 38 65% 80%;
  --popover-foreground: 108 17% 11%;
  --primary: 13 61% 49%;
  --primary-foreground: 0 0% 0%;
  --secondary: 124 17% 19%;
  --secondary-foreground: 34 70% 87%;
  --muted: 39 58% 76%;
  --muted-foreground: 34 26% 28%;
  --accent: 37 89% 62%;
  --accent-foreground: 108 17% 11%;
  --destructive: 7 75% 41%;
  --destructive-foreground: 0 0% 100%;
  --border: 34 37% 64%;
  --input: 39 58% 76%;
  --ring: 13 61% 49%;
  --success: 153 40% 30%;
  --success-foreground: 0 0% 100%;
  --warning: 37 80% 55%;
  --warning-foreground: 108 17% 11%;
  --chart-1: 13 61% 49%;
  --chart-2: 37 89% 62%;
  --chart-3: 124 17% 19%;
  --chart-4: 23 55% 72%;
  --chart-5: 11 35% 50%;
  --shadow-sm: 0 1px 2px rgba(26,34,24,0.10);
  --shadow-md: 0 2px 8px rgba(26,34,24,0.14);
  --shadow-lg: 0 4px 16px rgba(26,34,24,0.18);
  --shadow-xl: 0 8px 32px rgba(26,34,24,0.22);
  --gradient-hero: linear-gradient(180deg,#293a2a 0%,#1e2c1f 100%);
  --gradient-brand: linear-gradient(135deg,#cb5331 0%,#f4b247 100%);
  --gradient-subtle: linear-gradient(180deg,#f5e1c6 0%,#e6cda0 100%);
  --duration: 200ms;
  --duration-slow: 420ms;
  --ease: cubic-bezier(0.25,0.1,0.25,1.0);
  --tracking-tight: -0.01em;
  --tracking-normal: 0.02em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 0rem;
  --input-radius: 0.25rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 0;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 1px;
  --heading-transform: uppercase;