:root {
  /* Colors */
  --bg: #F3E8CF;
  --panel: #EFE2C4;
  --border: #34392F;
  --border-highlight: rgba(255, 255, 255, 0.45);
  --panel-shadow: rgba(0, 0, 0, 0.08);

  /* Accent palette */
  --red: #B84E45;
  --orange: #C67A33;
  --yellow: #C9A13B;
  --olive: #7A8D46;
  --green: #4F7F45;
  --teal: #447F73;
  --blue: #3F6F8D;
  --navy: #3F537E;
  --purple: #655D8D;
  --magenta: #8B4E73;
  --rose: #A45469;
  --brick: #9E4C4C;

  /* Typography */
  --font-primary: 'IBM Plex Sans', 'Inter', -apple-system, sans-serif;
  --font-mono: 'Andale Mono', 'Trebuchet MS', monospace;

  /* Border radii */
  --radius-large: 28px;
  --radius-medium: 18px;
  --radius-small: 6px;

  /* Spacing (8pt grid) */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 16px;
  --spacing-4: 24px;
  --spacing-5: 32px;
  --spacing-6: 48px;
  --spacing-7: 64px;

  /* Transitions */
  --transition-fast: 100ms;
  --transition-normal: 150ms;
  --transition-slow: 250ms;

  /* Border system */
  --border-outer: 4px solid var(--border);
  --border-inner: 2px solid var(--border);
}