/* ==========================================================================
   TableSide Media — Design tokens
   Single source of truth for colors, spacing, type scale, radii, and shadows
   used across the creator-facing site. Import this BEFORE shared.css or any
   page-specific stylesheet.
   ========================================================================== */

:root {
  /* ─── Brand colors ─── */
  --deep-green: #1F433D;
  --deep-green-hover: #172E2A;
  --dark-green: #3D5240;
  --rich-green: #234B43;
  --cream: #EDE6D6;
  --cream-soft: #E8E0D0;
  --bg: #D4C9B5;
  --orange: #E8913A;

  /* ─── Text colors ─── */
  --text: #1F1F1F;
  --muted: #3D3D3D;
  --muted-light: #5C5C5C;
  --muted-faint: rgba(31, 67, 61, 0.45);

  /* ─── Overlays and lines ─── */
  --overlay-light: rgba(31, 67, 61, 0.06);
  --overlay-med: rgba(31, 67, 61, 0.08);
  --overlay-strong: rgba(31, 67, 61, 0.15);
  --line: rgba(31, 67, 61, 0.08);
  --line-strong: rgba(31, 67, 61, 0.15);

  /* ─── Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48) ─── */
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */

  /* ─── Type scale ─── */
  --font-body: 'Libre Franklin', sans-serif;
  --font-display: 'Playfair Display', serif;
  --fs-xs: 0.68rem;     /* micro labels, pills */
  --fs-sm: 0.78rem;     /* secondary body */
  --fs-base: 0.85rem;   /* standard body */
  --fs-md: 0.95rem;     /* emphasized body */
  --fs-lg: 1.15rem;     /* small headings */
  --fs-xl: 1.5rem;      /* card titles */
  --fs-2xl: 1.75rem;    /* page titles */

  /* ─── Border radii ─── */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  /* ─── Shadows ─── */
  --shadow-subtle: 0 2px 12px rgba(31, 67, 61, 0.05);
  --shadow: 0 2px 16px rgba(31, 67, 61, 0.08);
  --shadow-elevated: 0 8px 32px rgba(31, 67, 61, 0.12);
}