Ember Sheet

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#F2F0EC"
    foreground: "#B03808"
    card: "#ECEAE5"
    card-foreground: "#B03808"
    popover: "#F5F3EF"
    popover-foreground: "#B03808"
    primary: "#C84010"
    primary-foreground: "#FFFFFF"
    secondary: "#E6E1DA"
    secondary-foreground: "#B03808"
    muted: "#E8E4DD"
    muted-foreground: "#000000"
    accent: "#A83808"
    accent-foreground: "#F5F3EF"
    destructive: "#B91C1C"
    destructive-foreground: "#FFFFFF"
    border: "#D8D3CC"
    input: "#ECEAE5"
    ring: "#C84010"
    success: "#2A7A4F"
    success-foreground: "#FFFFFF"
    warning: "#C87020"
    warning-foreground: "#1C1510"
    chart-1: "#C84010"
    chart-2: "#C2782E"
    chart-3: "#7A9E5E"
    chart-4: "#4A7FA5"
    chart-5: "#8B6EA0"
  palette:
    - { name: "brand-orange-vivid", hex: "#d44e10", role: "brand-primary-display" }
    - { name: "brand-orange-ink", hex: "#c84010", role: "primary" }
    - { name: "brand-orange-body", hex: "#b03808", role: "foreground" }
    - { name: "brand-orange-deep", hex: "#a83808", role: "accent" }
    - { name: "brand-orange-darkest", hex: "#8c2c06", role: "brand-darkest" }
    - { name: "orange-mid-tint", hex: "#c07040", role: "muted-foreground" }
    - { name: "orange-pale", hex: "#d88c62", role: "tint" }
    - { name: "paper-warm", hex: "#f2f0ec", role: "background" }
    - { name: "paper-card", hex: "#eceae5", role: "surface-card" }
    - { name: "paper-muted", hex: "#e8e4dd", role: "surface-muted" }
    - { name: "paper-popover", hex: "#f5f3ef", role: "surface-popover" }
    - { name: "rule-line", hex: "#d8d3cc", role: "border" }
    - { name: "dark-ground", hex: "#1c1510", role: "dark-background" }
    - { name: "dark-card", hex: "#251c15", role: "dark-surface" }
    - { name: "dark-muted", hex: "#2a1f17", role: "dark-muted" }
    - { name: "dark-border", hex: "#3a2c22", role: "dark-border" }
    - { name: "orange-glow", hex: "#f07840", role: "dark-mode-foreground" }
    - { name: "orange-accent-dark", hex: "#f09050", role: "dark-mode-accent" }
    - { name: "dark-muted-fg", hex: "#c07035", role: "dark-muted-foreground" }

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

:root {
  --radius: 0rem;
  --font-heading: 'Archivo Black', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --background: 40 19% 94%;
  --foreground: 17 91% 36%;
  --card: 43 16% 91%;
  --card-foreground: 17 91% 36%;
  --popover: 40 23% 95%;
  --popover-foreground: 17 91% 36%;
  --primary: 16 85% 42%;
  --primary-foreground: 0 0% 100%;
  --secondary: 35 19% 88%;
  --secondary-foreground: 17 91% 36%;
  --muted: 38 19% 89%;
  --muted-foreground: 0 0% 0%;
  --accent: 18 91% 35%;
  --accent-foreground: 40 23% 95%;
  --destructive: 0 74% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 35 13% 82%;
  --input: 43 16% 91%;
  --ring: 16 85% 42%;
  --success: 148 49% 32%;
  --success-foreground: 0 0% 100%;
  --warning: 29 72% 45%;
  --warning-foreground: 25 27% 9%;
  --chart-1: 16 85% 42%;
  --chart-2: 30 62% 47%;
  --chart-3: 94 25% 49%;
  --chart-4: 205 38% 47%;
  --chart-5: 275 21% 53%;
  --shadow-sm: 0 1px 2px 0 rgba(176,56,8,0.06);
  --shadow-md: 0 2px 6px 0 rgba(176,56,8,0.08);
  --shadow-lg: 0 4px 12px 0 rgba(176,56,8,0.10);
  --shadow-xl: 0 8px 24px 0 rgba(176,56,8,0.12);
  --gradient-hero: linear-gradient(180deg,#f2f0ec 0%,#eceae5 100%);
  --gradient-brand: linear-gradient(135deg,#c84010 0%,#8c2c06 100%);
  --gradient-subtle: linear-gradient(180deg,#f5f3ef 0%,#e8e4dd 100%);
  --duration: 120ms;
  --duration-slow: 240ms;
  --ease: cubic-bezier(0.25,0.1,0.25,1.0);
  --tracking-tight: -0.02em;
  --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: 1px;
  --badge-border-width: 1px;
  --heading-transform: none;