Goat Retro — Vintage Editorial

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#EADDC8"
    foreground: "#2A1F15"
    card: "#DFD0B8"
    card-foreground: "#2A1F15"
    popover: "#EADDC8"
    popover-foreground: "#2A1F15"
    primary: "#9E4F24"
    primary-foreground: "#FDF6ED"
    secondary: "#82B3AD"
    secondary-foreground: "#1A3330"
    muted: "#D4BC9C"
    muted-foreground: "#000000"
    accent: "#82B3AD"
    accent-foreground: "#0F2E2B"
    destructive: "#B83420"
    destructive-foreground: "#FDF6ED"
    border: "#C4A882"
    input: "#C4A882"
    ring: "#9E4F24"
    success: "#3D6B4A"
    success-foreground: "#F0FDF5"
    warning: "#D4882A"
    warning-foreground: "#1A0E00"
    chart-1: "#9E4F24"
    chart-2: "#82B3AD"
    chart-3: "#D4882A"
    chart-4: "#73733C"
    chart-5: "#C4A882"
  palette:
    - { name: "parchment", hex: "#eaddc8", role: "surface" }
    - { name: "parchment-mid", hex: "#dfd0b8", role: "card-surface" }
    - { name: "parchment-deep", hex: "#d4bc9c", role: "muted-surface" }
    - { name: "cream-light", hex: "#f4d4bc", role: "highlight" }
    - { name: "warm-white", hex: "#fdf6ed", role: "on-primary" }
    - { name: "rust", hex: "#9e4f24", role: "primary" }
    - { name: "rust-bright", hex: "#c46040", role: "primary-dark-mode" }
    - { name: "rust-vivid", hex: "#c45434", role: "vibrant" }
    - { name: "rust-dark", hex: "#7a3518", role: "primary-shade" }
    - { name: "teal", hex: "#82b3ad", role: "secondary" }
    - { name: "teal-deep", hex: "#4a7d79", role: "secondary-shade" }
    - { name: "teal-pale", hex: "#b5d4d1", role: "secondary-tint" }
    - { name: "ink", hex: "#2a1f15", role: "foreground" }
    - { name: "ink-dark", hex: "#1e1410", role: "dark-surface" }
    - { name: "brown-mid", hex: "#6b5540", role: "muted-foreground" }
    - { name: "warm-muted-fg", hex: "#b09a7a", role: "dark-muted-foreground" }
    - { name: "tan", hex: "#c4a882", role: "border" }
    - { name: "dark-card", hex: "#281c14", role: "dark-card" }
    - { name: "dark-muted", hex: "#3a2a21", role: "dark-muted" }

/* 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=IBM%20Plex%20Mono:wght@400;500;600&display=swap");

:root {
  --radius: 0.25rem;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --background: 37 45% 85%;
  --foreground: 29 33% 12%;
  --card: 37 38% 80%;
  --card-foreground: 29 33% 12%;
  --popover: 37 45% 85%;
  --popover-foreground: 29 33% 12%;
  --primary: 21 63% 38%;
  --primary-foreground: 34 80% 96%;
  --secondary: 173 24% 61%;
  --secondary-foreground: 173 32% 15%;
  --muted: 34 39% 72%;
  --muted-foreground: 0 0% 0%;
  --accent: 173 24% 61%;
  --accent-foreground: 174 51% 12%;
  --destructive: 8 70% 42%;
  --destructive-foreground: 34 80% 96%;
  --border: 35 36% 64%;
  --input: 35 36% 64%;
  --ring: 21 63% 38%;
  --success: 137 27% 33%;
  --success-foreground: 143 76% 97%;
  --warning: 33 67% 50%;
  --warning-foreground: 32 100% 5%;
  --chart-1: 21 63% 38%;
  --chart-2: 173 24% 61%;
  --chart-3: 33 67% 50%;
  --chart-4: 60 31% 34%;
  --chart-5: 35 36% 64%;
  --shadow-sm: none;
  --shadow-md: 0 1px 4px rgba(30,20,16,0.08);
  --shadow-lg: 0 2px 10px rgba(30,20,16,0.12);
  --shadow-xl: 0 4px 20px rgba(30,20,16,0.18);
  --gradient-hero: linear-gradient(180deg,#eaddc8 0%,#d4bc9c 100%);
  --gradient-brand: linear-gradient(135deg,#9e4f24 0%,#c46040 100%);
  --gradient-subtle: linear-gradient(180deg,#eaddc8 0%,#dfd0b8 100%);
  --duration: 180ms;
  --duration-slow: 380ms;
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --font-weight-heading: 900;
  --font-weight-body: 400;
  --button-radius: 0rem;
  --card-radius: 0rem;
  --input-radius: 0rem;
  --badge-radius: 0rem;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 1px;
  --heading-transform: uppercase;