Orchid Analog

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#E05530"
    foreground: "#1A0804"
    card: "#E05530"
    card-foreground: "#1A0804"
    popover: "#EDE0C8"
    popover-foreground: "#1A0804"
    primary: "#1A0804"
    primary-foreground: "#F5E8D8"
    secondary: "#F5E8D8"
    secondary-foreground: "#1A0804"
    muted: "#B83818"
    muted-foreground: "#F5E8D8"
    accent: "#F3E590"
    accent-foreground: "#1A0804"
    destructive: "#B81808"
    destructive-foreground: "#FFFFFF"
    border: "#3D1A0A"
    input: "#EDE0C8"
    ring: "#1A0804"
    success: "#4A5F4E"
    success-foreground: "#F5E8D8"
    warning: "#F0B830"
    warning-foreground: "#1A0804"
    chart-1: "#F3E590"
    chart-2: "#4A5F4E"
    chart-3: "#B3C8CF"
    chart-4: "#8C5421"
    chart-5: "#D8CDB9"
  palette:
    - { name: "brand-orange", hex: "#e05530", role: "primary-surface" }
    - { name: "dark-warm-brown", hex: "#1e0c06", role: "dark-surface" }
    - { name: "card-brown", hex: "#2e1a0e", role: "surface-variant" }
    - { name: "warm-brown", hex: "#3d1a0a", role: "secondary-surface" }
    - { name: "deep-brown-border", hex: "#4a2818", role: "border" }
    - { name: "muted-orange", hex: "#b83818", role: "muted-surface" }
    - { name: "mid-orange", hex: "#c04018", role: "orange-variant" }
    - { name: "light-orange", hex: "#e26439", role: "orange-light" }
    - { name: "orange-core", hex: "#df5832", role: "orange-core" }
    - { name: "dark-red-orange", hex: "#db4a2c", role: "orange-dark" }
    - { name: "warm-cream", hex: "#f5e8d8", role: "foreground" }
    - { name: "input-cream", hex: "#ede0c8", role: "input-surface" }
    - { name: "sandy-beige", hex: "#d8cdb9", role: "light-surface" }
    - { name: "golden-yellow", hex: "#f3e590", role: "accent" }
    - { name: "warm-yellow", hex: "#f6d681", role: "accent-variant" }
    - { name: "sage-green", hex: "#4a5f4e", role: "tertiary" }
    - { name: "dusty-blue", hex: "#b3c8cf", role: "tertiary" }
    - { name: "olive-khaki", hex: "#8a8060", role: "surface-tertiary" }
    - { name: "russet-brown", hex: "#8c5421", role: "mid-tone" }

/* Generated by Identity Forge design kits */
@import url("https://fonts.googleapis.com/css2?family=Fraunces: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: 'Fraunces', serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 13 74% 53%;
  --foreground: 11 73% 6%;
  --card: 13 74% 53%;
  --card-foreground: 11 73% 6%;
  --popover: 39 51% 86%;
  --popover-foreground: 11 73% 6%;
  --primary: 11 73% 6%;
  --primary-foreground: 33 59% 90%;
  --secondary: 33 59% 90%;
  --secondary-foreground: 11 73% 6%;
  --muted: 12 77% 41%;
  --muted-foreground: 33 59% 90%;
  --accent: 52 80% 76%;
  --accent-foreground: 11 73% 6%;
  --destructive: 5 92% 38%;
  --destructive-foreground: 0 0% 100%;
  --border: 19 72% 14%;
  --input: 39 51% 86%;
  --ring: 11 73% 6%;
  --success: 131 12% 33%;
  --success-foreground: 33 59% 90%;
  --warning: 43 86% 56%;
  --warning-foreground: 11 73% 6%;
  --chart-1: 52 80% 76%;
  --chart-2: 131 12% 33%;
  --chart-3: 195 23% 76%;
  --chart-4: 29 62% 34%;
  --chart-5: 39 28% 79%;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 8px 32px rgba(30,12,6,0.32);
  --shadow-xl: 0 20px 60px rgba(30,12,6,0.48);
  --gradient-hero: linear-gradient(180deg, rgba(30,12,6,0.72) 0%, rgba(224,85,48,0.00) 60%);
  --gradient-brand: linear-gradient(135deg, #e05530 0%, #c04018 100%);
  --gradient-subtle: linear-gradient(180deg, #e05530 0%, #cc4a1e 100%);
  --duration: 200ms;
  --duration-slow: 500ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 800;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 0rem;
  --input-radius: 9999px;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 0;
  --input-border-width: 1px;
  --button-border-width: 1px;
  --badge-border-width: 1px;
  --heading-transform: none;