Ba&Sn — Monument Grotesk Editorial

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#FEC7DA"
    foreground: "#0D0105"
    card: "#FAEBF0"
    card-foreground: "#0D0105"
    popover: "#FAEBF0"
    popover-foreground: "#0D0105"
    primary: "#F24932"
    primary-foreground: "#0D0105"
    secondary: "#F5D8E8"
    secondary-foreground: "#0D0105"
    muted: "#F2CEDE"
    muted-foreground: "#6E2535"
    accent: "#F24932"
    accent-foreground: "#0D0105"
    destructive: "#C01A0A"
    destructive-foreground: "#FFFFFF"
    border: "#F0B0C5"
    input: "#FAEBF0"
    ring: "#F24932"
    success: "#155C2F"
    success-foreground: "#E8F8EE"
    warning: "#92400E"
    warning-foreground: "#FFF8E1"
    chart-1: "#F24932"
    chart-2: "#6E2535"
    chart-3: "#D45A4A"
    chart-4: "#A85060"
    chart-5: "#0D0105"
  palette:
    - { name: "pitch-black", hex: "#000000", role: "frame / poster mount / dark mode base" }
    - { name: "tomato-red", hex: "#f24932", role: "hero surface / primary action / heading on pink" }
    - { name: "blush-pink", hex: "#fec7da", role: "content surface / ink on red / light mode background" }
    - { name: "cream", hex: "#faebf0", role: "display surface / card / light mode card" }
    - { name: "pale-rose", hex: "#f9eaef", role: "near-cream tint / subtle variant" }
    - { name: "dark-red", hex: "#a83828", role: "dark vibrant / muted accent" }
    - { name: "soft-peach", hex: "#f49998", role: "light vibrant / secondary tint" }
    - { name: "muted-rose", hex: "#7c7474", role: "muted tone" }
    - { name: "dark-muted", hex: "#443c3c", role: "dark muted" }
    - { name: "light-muted", hex: "#cac0c5", role: "light muted" }
    - { name: "burgundy", hex: "#6e2535", role: "mutedForeground on light / chart series" }
    - { name: "chart-tomato", hex: "#f24932", role: "data-viz series-1" }
    - { name: "chart-burgundy", hex: "#6e2535", role: "data-viz series-2" }
    - { name: "chart-salmon", hex: "#d45a4a", role: "data-viz series-3" }
    - { name: "chart-deep-rose", hex: "#a85060", role: "data-viz series-4" }
    - { name: "chart-near-black", hex: "#0d0105", role: "data-viz series-5" }
typography:
  heading: { family: "Space Grotesk", weights: [400, 500, 700] }
  body: { family: "Space Grotesk", weights: [400, 500, 700] }

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

:root {
  --radius: 0.125rem;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-sans: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 339 96% 89%;
  --foreground: 340 86% 3%;
  --card: 340 60% 95%;
  --card-foreground: 340 86% 3%;
  --popover: 340 60% 95%;
  --popover-foreground: 340 86% 3%;
  --primary: 7 88% 57%;
  --primary-foreground: 340 86% 3%;
  --secondary: 327 59% 90%;
  --secondary-foreground: 340 86% 3%;
  --muted: 333 58% 88%;
  --muted-foreground: 347 50% 29%;
  --accent: 7 88% 57%;
  --accent-foreground: 340 86% 3%;
  --destructive: 5 90% 40%;
  --destructive-foreground: 0 0% 100%;
  --border: 340 68% 82%;
  --input: 340 60% 95%;
  --ring: 7 88% 57%;
  --success: 142 63% 22%;
  --success-foreground: 143 53% 94%;
  --warning: 23 83% 31%;
  --warning-foreground: 46 100% 94%;
  --chart-1: 7 88% 57%;
  --chart-2: 347 50% 29%;
  --chart-3: 7 62% 56%;
  --chart-4: 349 35% 49%;
  --chart-5: 340 86% 3%;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --gradient-hero: linear-gradient(180deg, #f24932 0%, #f24932 100%);
  --gradient-brand: linear-gradient(180deg, #f24932 0%, #fec7da 100%);
  --gradient-subtle: linear-gradient(180deg, #fec7da 0%, #faebf0 100%);
  --duration: 120ms;
  --duration-slow: 250ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 800;
  --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: uppercase;