Shacklewell Coral

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#ED755A"
    foreground: "#1C0F0A"
    card: "#FFFFFF"
    card-foreground: "#1C0F0A"
    popover: "#FFFFFF"
    popover-foreground: "#1C0F0A"
    primary: "#1C0F0A"
    primary-foreground: "#F5DDD5"
    secondary: "#F5DDD5"
    secondary-foreground: "#1C0F0A"
    muted: "#E3705A"
    muted-foreground: "#1C0F0A"
    accent: "#F09880"
    accent-foreground: "#1C0F0A"
    destructive: "#C0392B"
    destructive-foreground: "#FFFFFF"
    border: "#2A1510"
    input: "#2A1510"
    ring: "#1C0F0A"
    success: "#2D6A4F"
    success-foreground: "#FFFFFF"
    warning: "#E07B00"
    warning-foreground: "#000000"
    chart-1: "#ED755A"
    chart-2: "#1C0F0A"
    chart-3: "#C8604A"
    chart-4: "#F09880"
    chart-5: "#F5DDD5"
  palette:
    - { name: "coral-main", hex: "#ed755a", role: "surface-background" }
    - { name: "coral-light", hex: "#f47459", role: "surface-variant" }
    - { name: "coral-mid", hex: "#f1775b", role: "surface-variant" }
    - { name: "coral-soft", hex: "#f4785c", role: "surface-variant" }
    - { name: "coral-shadow", hex: "#e77359", role: "surface-variant" }
    - { name: "coral-dark", hex: "#cb6752", role: "surface-deep" }
    - { name: "coral-deeper", hex: "#d36b54", role: "surface-deep" }
    - { name: "coral-accent", hex: "#c8604a", role: "accent" }
    - { name: "coral-muted", hex: "#a46c56", role: "muted" }
    - { name: "light-peach", hex: "#f09880", role: "accent-light" }
    - { name: "light-muted-rose", hex: "#bb6a64", role: "palette" }
    - { name: "near-black", hex: "#1c0f0a", role: "ink-primary" }
    - { name: "dark-brown", hex: "#4c1c14", role: "ink-secondary" }
    - { name: "dark-muted-brown", hex: "#58332b", role: "ink-tertiary" }
    - { name: "medium-brown", hex: "#8b4a38", role: "palette" }
    - { name: "scored-dark", hex: "#342a25", role: "palette" }
    - { name: "warm-cream", hex: "#f5ddd5", role: "ink-on-dark" }
    - { name: "white", hex: "#ffffff", role: "card-surface" }
    - { name: "data-coral", hex: "#ed755a", role: "data-viz" }

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

:root {
  --radius: 0.125rem;
  --font-heading: 'Anton', sans-serif;
  --font-sans: 'Barlow', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 11 80% 64%;
  --foreground: 17 47% 7%;
  --card: 0 0% 100%;
  --card-foreground: 17 47% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 17 47% 7%;
  --primary: 17 47% 7%;
  --primary-foreground: 15 62% 90%;
  --secondary: 15 62% 90%;
  --secondary-foreground: 17 47% 7%;
  --muted: 10 71% 62%;
  --muted-foreground: 17 47% 7%;
  --accent: 13 79% 72%;
  --accent-foreground: 17 47% 7%;
  --destructive: 6 63% 46%;
  --destructive-foreground: 0 0% 100%;
  --border: 12 45% 11%;
  --input: 12 45% 11%;
  --ring: 17 47% 7%;
  --success: 153 40% 30%;
  --success-foreground: 0 0% 100%;
  --warning: 33 100% 44%;
  --warning-foreground: 0 0% 0%;
  --chart-1: 11 80% 64%;
  --chart-2: 17 47% 7%;
  --chart-3: 10 53% 54%;
  --chart-4: 13 79% 72%;
  --chart-5: 15 62% 90%;
  --shadow-sm: 0 1px 2px rgba(28,15,10,0.12);
  --shadow-md: 0 2px 4px rgba(28,15,10,0.16);
  --shadow-lg: 0 4px 8px rgba(28,15,10,0.2);
  --shadow-xl: 0 8px 16px rgba(28,15,10,0.24);
  --gradient-hero: linear-gradient(160deg, #f47459 0%, #ed755a 45%, #cb6752 100%);
  --gradient-brand: linear-gradient(90deg, #f47459 0%, #c8604a 100%);
  --gradient-subtle: linear-gradient(180deg, #f5ddd5 0%, #ffffff 100%);
  --duration: 150ms;
  --duration-slow: 280ms;
  --ease: cubic-bezier(0.25, 0, 0.35, 1);
  --tracking-tight: -0.01em;
  --tracking-normal: 0.01em;
  --font-weight-heading: 900;
  --font-weight-body: 400;
  --button-radius: 0rem;
  --card-radius: 0rem;
  --input-radius: 0rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 1px;
  --heading-transform: uppercase;