The Social Club

---
# Machine-readable tokens (the WHAT). The prose body gives the WHY + the rules.
colors:
  roles_light:
    background: "#FAFAF4"
    foreground: "#1C1A0E"
    card: "#FFFFFF"
    card-foreground: "#1C1A0E"
    popover: "#FFFFFF"
    popover-foreground: "#1C1A0E"
    primary: "#C8CA30"
    primary-foreground: "#1A1800"
    secondary: "#736E4E"
    secondary-foreground: "#FFFFFF"
    muted: "#E8E4D5"
    muted-foreground: "#5D5840"
    accent: "#2E2C1F"
    accent-foreground: "#FAFAF4"
    destructive: "#9C3C2C"
    destructive-foreground: "#FFFFFF"
    border: "#D3CFBC"
    input: "#D3CFBC"
    ring: "#C8CA30"
    success: "#2D702C"
    success-foreground: "#FFFFFF"
    warning: "#8A5206"
    warning-foreground: "#FFFFFF"
    chart-1: "#C8CA30"
    chart-2: "#9C3C2C"
    chart-3: "#426063"
    chart-4: "#2D702C"
    chart-5: "#945C37"
  palette:
    - { name: "deep-olive", hex: "#2e2c1f", role: "dark-surface" }
    - { name: "muted-khaki", hex: "#736e4e", role: "mid-surface" }
    - { name: "cream-white", hex: "#fafaf4", role: "light-surface" }
    - { name: "near-white", hex: "#fefefe", role: "light-surface" }
    - { name: "vivid-yellow-dark", hex: "#d6d84a", role: "primary-accent" }
    - { name: "vivid-yellow-light", hex: "#c8ca30", role: "primary-accent" }
    - { name: "muted-yellow", hex: "#ccc67a", role: "tint" }
    - { name: "scored-yellow", hex: "#dedf7d", role: "tint" }
    - { name: "card-dark", hex: "#3c3a29", role: "dark-card" }
    - { name: "border-dark", hex: "#4e503a", role: "border" }
    - { name: "border-light", hex: "#d3cfbc", role: "border" }
    - { name: "muted-surface-light", hex: "#e8e4d5", role: "muted" }
    - { name: "ink-dim", hex: "#5d5840", role: "muted-foreground" }
    - { name: "warm-beige", hex: "#c4c1ae", role: "muted-foreground" }
    - { name: "rust-red", hex: "#9c3c2c", role: "destructive" }
    - { name: "dark-rust", hex: "#522c17", role: "dark-shade" }
    - { name: "warm-amber", hex: "#945c37", role: "data-viz" }
    - { name: "amber-warning", hex: "#8a5206", role: "warning" }
    - { name: "warm-brown", hex: "#a38058", role: "muted" }

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

:root {
  --radius: 0.875rem;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --background: 60 37% 97%;
  --foreground: 51 33% 8%;
  --card: 0 0% 100%;
  --card-foreground: 51 33% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 51 33% 8%;
  --primary: 61 62% 49%;
  --primary-foreground: 55 100% 5%;
  --secondary: 52 19% 38%;
  --secondary-foreground: 0 0% 100%;
  --muted: 47 29% 87%;
  --muted-foreground: 50 18% 31%;
  --accent: 52 19% 15%;
  --accent-foreground: 60 37% 97%;
  --destructive: 9 56% 39%;
  --destructive-foreground: 0 0% 100%;
  --border: 50 21% 78%;
  --input: 50 21% 78%;
  --ring: 61 62% 49%;
  --success: 119 44% 31%;
  --success-foreground: 0 0% 100%;
  --warning: 35 92% 28%;
  --warning-foreground: 0 0% 100%;
  --chart-1: 61 62% 49%;
  --chart-2: 9 56% 39%;
  --chart-3: 185 20% 32%;
  --chart-4: 119 44% 31%;
  --chart-5: 24 46% 40%;
  --shadow-sm: 0 1px 3px rgba(30,28,16,0.10);
  --shadow-md: 0 4px 12px rgba(30,28,16,0.12);
  --shadow-lg: 0 8px 24px rgba(30,28,16,0.14);
  --shadow-xl: 0 16px 48px rgba(30,28,16,0.18);
  --gradient-hero: linear-gradient(to bottom, rgba(46,44,31,0.28) 0%, rgba(46,44,31,0.88) 100%);
  --gradient-brand: linear-gradient(135deg, #2e2c1f 0%, #736e4e 100%);
  --gradient-subtle: linear-gradient(180deg, #fafaf4 0%, #e8e4d5 100%);
  --duration: 220ms;
  --duration-slow: 420ms;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --button-radius: 9999px;
  --card-radius: 0.75rem;
  --input-radius: 0.5rem;
  --badge-radius: 9999px;
  --border-width: 1px;
  --card-border-width: 1px;
  --input-border-width: 1px;
  --button-border-width: 0;
  --badge-border-width: 0;
  --heading-transform: none;