Soul Waves Vinyl

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F5F2DE"
    foreground: "#1D1C16"
    card: "#FAF7E4"
    card-foreground: "#1D1C16"
    popover: "#FAF7E4"
    popover-foreground: "#1D1C16"
    primary: "#4F649B"
    primary-foreground: "#F5F2DE"
    secondary: "#E4E0C8"
    secondary-foreground: "#3A3928"
    muted: "#EBE8D4"
    muted-foreground: "#5A5848"
    accent: "#CCA464"
    accent-foreground: "#1D1C16"
    destructive: "#C0392B"
    destructive-foreground: "#FFFFFF"
    border: "#CCC9B0"
    input: "#CCC9B0"
    ring: "#4F649B"
    success: "#2D7A4F"
    success-foreground: "#FFFFFF"
    warning: "#D97C0A"
    warning-foreground: "#000000"
    chart-1: "#4F649B"
    chart-2: "#CCA464"
    chart-3: "#85B3C4"
    chart-4: "#634A20"
    chart-5: "#8C8C8B"
  palette:
    - { name: "cream-parchment", hex: "#f5f2de", role: "surface-primary" }
    - { name: "light-cream", hex: "#faf7e4", role: "surface-card" }
    - { name: "pale-cream", hex: "#fcf4de", role: "surface-light" }
    - { name: "dusty-navy", hex: "#4f649b", role: "brand-primary" }
    - { name: "deep-navy", hex: "#405794", role: "brand-primary-dark" }
    - { name: "medium-navy", hex: "#55699d", role: "brand-primary-mid" }
    - { name: "sky-blue", hex: "#85b3c4", role: "brand-accent" }
    - { name: "warm-gold", hex: "#cca464", role: "accent" }
    - { name: "dusty-sand", hex: "#b89f83", role: "accent-muted" }
    - { name: "dark-umber", hex: "#634a20", role: "dark-accent" }
    - { name: "deep-warm-black", hex: "#1d1c16", role: "ink" }
    - { name: "medium-gray", hex: "#8c8c8b", role: "neutral" }
    - { name: "warm-gray", hex: "#7b7b7b", role: "neutral-mid" }
    - { name: "dark-slate", hex: "#513f3c", role: "neutral-dark" }
    - { name: "data-navy", hex: "#4f649b", role: "data-viz" }
    - { name: "data-gold", hex: "#cca464", role: "data-viz" }
    - { name: "data-sky", hex: "#85b3c4", role: "data-viz" }
    - { name: "data-umber", hex: "#634a20", role: "data-viz" }
    - { name: "data-stone", hex: "#8c8c8b", role: "data-viz" }

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

:root {
  --radius: 0rem;
  --font-heading: 'Bebas Neue', sans-serif;
  --font-sans: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 52 53% 92%;
  --foreground: 51 14% 10%;
  --card: 52 69% 94%;
  --card-foreground: 51 14% 10%;
  --popover: 52 69% 94%;
  --popover-foreground: 51 14% 10%;
  --primary: 223 32% 46%;
  --primary-foreground: 52 53% 92%;
  --secondary: 51 34% 84%;
  --secondary-foreground: 57 18% 19%;
  --muted: 52 37% 88%;
  --muted-foreground: 53 11% 32%;
  --accent: 37 50% 60%;
  --accent-foreground: 51 14% 10%;
  --destructive: 6 63% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 54 22% 75%;
  --input: 54 22% 75%;
  --ring: 223 32% 46%;
  --success: 146 46% 33%;
  --success-foreground: 0 0% 100%;
  --warning: 33 91% 45%;
  --warning-foreground: 0 0% 0%;
  --chart-1: 223 32% 46%;
  --chart-2: 37 50% 60%;
  --chart-3: 196 35% 65%;
  --chart-4: 38 51% 26%;
  --chart-5: 60 0% 55%;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 2px 8px rgba(29,28,22,0.08);
  --shadow-xl: 0 4px 20px rgba(29,28,22,0.14);
  --gradient-hero: linear-gradient(180deg, rgba(26,25,23,0.72) 0%, rgba(26,25,23,0) 52%);
  --gradient-brand: linear-gradient(135deg, #4f649b 0%, #85b3c4 100%);
  --gradient-subtle: linear-gradient(180deg, #f5f2de 0%, #ebe8d4 100%);
  --duration: 180ms;
  --duration-slow: 360ms;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tracking-tight: 0.03em;
  --tracking-normal: 0.01em;
  --font-weight-heading: 400;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 0rem;
  --input-radius: 0rem;
  --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;