It Smells Like Ginger

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#163A6C"
    foreground: "#F0F2F5"
    card: "#1A4278"
    card-foreground: "#F0F2F5"
    popover: "#1A4278"
    popover-foreground: "#F0F2F5"
    primary: "#E61D1D"
    primary-foreground: "#FFFFFF"
    secondary: "#236191"
    secondary-foreground: "#F0F2F5"
    muted: "#1E4880"
    muted-foreground: "#B8D0E8"
    accent: "#EF1E18"
    accent-foreground: "#000000"
    destructive: "#B01515"
    destructive-foreground: "#FFFFFF"
    border: "#2A5490"
    input: "#1E4880"
    ring: "#E61D1D"
    success: "#1A7A3D"
    success-foreground: "#FFFFFF"
    warning: "#C97B0F"
    warning-foreground: "#000000"
    chart-1: "#E61D1D"
    chart-2: "#4A9FD4"
    chart-3: "#F5A623"
    chart-4: "#8B2FC9"
    chart-5: "#22C47E"
  palette:
    - { name: "cobalt-deep", hex: "#163a6c", role: "surface-primary" }
    - { name: "cobalt-mid", hex: "#236191", role: "surface-secondary" }
    - { name: "cobalt-navy", hex: "#163a70", role: "surface-variant" }
    - { name: "cobalt-dark", hex: "#18396c", role: "surface-deep" }
    - { name: "cobalt-lifted", hex: "#1a4278", role: "card-surface" }
    - { name: "cobalt-muted", hex: "#1e4880", role: "muted-surface" }
    - { name: "red-vivid", hex: "#e61d1d", role: "brand-primary" }
    - { name: "red-signal", hex: "#ef1e18", role: "brand-accent" }
    - { name: "red-pure", hex: "#ea1d1d", role: "brand-variant" }
    - { name: "red-deep", hex: "#e41d1d", role: "vibrant" }
    - { name: "red-destructive", hex: "#b01515", role: "semantic" }
    - { name: "white-pure", hex: "#ffffff", role: "ink-primary" }
    - { name: "off-white", hex: "#f0f2f5", role: "ink-secondary" }
    - { name: "blue-muted-fg", hex: "#b8d0e8", role: "muted-ink" }
    - { name: "border-cobalt", hex: "#2a5490", role: "border" }
    - { name: "skin-warm", hex: "#eaac7b", role: "photographic" }
    - { name: "mauve-muted", hex: "#946464", role: "photographic-tone" }
    - { name: "navy-muted", hex: "#2f3a63", role: "tone" }
    - { name: "brown-warm", hex: "#834615", role: "tone" }

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

:root {
  --radius: 0.5rem;
  --font-heading: 'Anton', sans-serif;
  --font-sans: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 215 66% 25%;
  --foreground: 216 20% 95%;
  --card: 214 64% 29%;
  --card-foreground: 216 20% 95%;
  --popover: 214 64% 29%;
  --popover-foreground: 216 20% 95%;
  --primary: 0 80% 51%;
  --primary-foreground: 0 0% 100%;
  --secondary: 206 61% 35%;
  --secondary-foreground: 216 20% 95%;
  --muted: 214 62% 31%;
  --muted-foreground: 210 51% 82%;
  --accent: 2 87% 52%;
  --accent-foreground: 0 0% 0%;
  --destructive: 0 79% 39%;
  --destructive-foreground: 0 0% 100%;
  --border: 215 55% 36%;
  --input: 214 62% 31%;
  --ring: 0 80% 51%;
  --success: 142 65% 29%;
  --success-foreground: 0 0% 100%;
  --warning: 35 86% 42%;
  --warning-foreground: 0 0% 0%;
  --chart-1: 0 80% 51%;
  --chart-2: 203 62% 56%;
  --chart-3: 37 91% 55%;
  --chart-4: 276 62% 49%;
  --chart-5: 154 70% 45%;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.6);
  --shadow-xl: 0 8px 32px rgba(0,0,0,0.7);
  --gradient-hero: linear-gradient(180deg, #236191 0%, #163a6c 60%, #0e2447 100%);
  --gradient-brand: linear-gradient(135deg, #163a6c 0%, #e61d1d 100%);
  --gradient-subtle: linear-gradient(180deg, #1a4278 0%, #163a6c 100%);
  --duration: 150ms;
  --duration-slow: 400ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tracking-tight: -0.01em;
  --tracking-normal: 0.01em;
  --font-weight-heading: 900;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 0rem;
  --input-radius: 0.25rem;
  --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;