Odd One Out Editorial

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#C4B9A8"
    foreground: "#1A1B1A"
    card: "#CCC3B4"
    card-foreground: "#1A1B1A"
    popover: "#CCC3B4"
    popover-foreground: "#1A1B1A"
    primary: "#BD782B"
    primary-foreground: "#1A1B1A"
    secondary: "#6B5238"
    secondary-foreground: "#F5EDE0"
    muted: "#D8D1C7"
    muted-foreground: "#5C5248"
    accent: "#E09940"
    accent-foreground: "#1A1B1A"
    destructive: "#B03A2E"
    destructive-foreground: "#F5EDE0"
    border: "#9E9385"
    input: "#B8AE9E"
    ring: "#BD782B"
    success: "#2E6040"
    success-foreground: "#F0F7F2"
    warning: "#C8762A"
    warning-foreground: "#1A1B1A"
    chart-1: "#BD782B"
    chart-2: "#1A1B1A"
    chart-3: "#6B5238"
    chart-4: "#E09940"
    chart-5: "#9E9385"
  palette:
    - { name: "parchment", hex: "#c4b9a8", role: "background" }
    - { name: "near-black", hex: "#1a1b1a", role: "foreground" }
    - { name: "deep-black", hex: "#181818", role: "dark-background" }
    - { name: "amber", hex: "#bd782b", role: "brand-primary" }
    - { name: "gold", hex: "#e09940", role: "accent" }
    - { name: "dark-umber", hex: "#6b5238", role: "secondary" }
    - { name: "warm-brown", hex: "#8c6e4a", role: "secondary-dark" }
    - { name: "sienna", hex: "#6b4c2e", role: "data-viz" }
    - { name: "cream-light", hex: "#d8d1c7", role: "muted" }
    - { name: "card-cream", hex: "#ccc3b4", role: "card-surface" }
    - { name: "warm-grey", hex: "#9e9385", role: "border" }
    - { name: "dark-warm-grey", hex: "#5c5248", role: "muted-foreground" }
    - { name: "mid-warm-grey", hex: "#8a7f72", role: "dark-muted-foreground" }
    - { name: "charcoal", hex: "#242220", role: "dark-card" }
    - { name: "deep-charcoal", hex: "#2a2623", role: "dark-muted" }
    - { name: "dark-border", hex: "#3a3530", role: "dark-border" }
    - { name: "dark-secondary", hex: "#3d3028", role: "dark-secondary" }
    - { name: "amber-light", hex: "#e4be95", role: "light-vibrant" }
    - { name: "cream-white", hex: "#f5ede0", role: "inverse-surface" }

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

:root {
  --radius: 0rem;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --background: 36 19% 71%;
  --foreground: 120 2% 10%;
  --card: 37 19% 75%;
  --card-foreground: 120 2% 10%;
  --popover: 37 19% 75%;
  --popover-foreground: 120 2% 10%;
  --primary: 32 63% 45%;
  --primary-foreground: 120 2% 10%;
  --secondary: 31 31% 32%;
  --secondary-foreground: 37 51% 92%;
  --muted: 35 18% 81%;
  --muted-foreground: 30 12% 32%;
  --accent: 33 72% 56%;
  --accent-foreground: 120 2% 10%;
  --destructive: 6 59% 44%;
  --destructive-foreground: 37 51% 92%;
  --border: 34 11% 57%;
  --input: 37 15% 67%;
  --ring: 32 63% 45%;
  --success: 142 35% 28%;
  --success-foreground: 137 30% 95%;
  --warning: 29 65% 47%;
  --warning-foreground: 120 2% 10%;
  --chart-1: 32 63% 45%;
  --chart-2: 120 2% 10%;
  --chart-3: 31 31% 32%;
  --chart-4: 33 72% 56%;
  --chart-5: 34 11% 57%;
  --shadow-sm: 0 1px 2px rgba(26,27,26,0.04);
  --shadow-md: 0 2px 4px rgba(26,27,26,0.06);
  --shadow-lg: 0 4px 8px rgba(26,27,26,0.08);
  --shadow-xl: 0 8px 16px rgba(26,27,26,0.10);
  --gradient-hero: linear-gradient(135deg, #c4b9a8 0%, #bd782b 55%, #1a1b1a 100%);
  --gradient-brand: linear-gradient(180deg, #bd782b 0%, #6b5238 100%);
  --gradient-subtle: linear-gradient(180deg, #c4b9a8 0%, #d8d1c7 100%);
  --duration: 200ms;
  --duration-slow: 400ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tracking-tight: -0.01em;
  --tracking-normal: 0.05em;
  --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: 0;
  --badge-border-width: 1px;
  --heading-transform: uppercase;