:root {
  /* ===== Colors ===== */
  /* Brand */
  --color-purple: #A53692;
  --color-purple-deep: #6f2c91;
  --color-saffron: #E3A23B;
  --color-clay: #B24F30;
  --color-teal: #3E7A72;
  --color-grey: #8A8A8E;

  /* Backgrounds */
  --color-bg-white: #FFFFFF;
  --color-bg-paper: #F8F8FA;
  --color-bg-light: #F3F3F6;
  --color-bg-light-alt: #ECECF0;
  --color-bg-tint: #f4f4f5;
  --color-bg-input: #f8f8fa;

  /* Text */
  --text-dark: #1A1A1E;
  --text-light: #1A1A1E;
  --text-light-muted: rgba(26, 26, 30, 0.7);
  --text-dark-muted: rgba(26, 26, 30, 0.7);
  --text-strong: #111115;
  --text-body: #27272a;
  --text-muted: #55555f;
  --text-muted-2: #71717a;
  --text-muted-3: #52525b;
  --text-muted-4: #44444f;
  --text-muted-5: #3f3f46;
  --text-muted-6: #666670;
  --text-muted-7: #9999a3;
  --text-muted-8: #33333d;

  /* Borders */
  --border-color: #e2e2e8;
  --border-color-soft: #f0f0f4;
  --border-color-faint: #dcdce2;
  --border-dark: rgba(26, 26, 30, 0.08);
  --border-dark-soft: rgba(26, 26, 30, 0.05);

  /* Purple tints */
  --purple-tint-08: rgba(111, 44, 145, 0.08);
  --purple-tint-10: rgba(111, 44, 145, 0.1);
  --purple-tint-15: rgba(111, 44, 145, 0.15);
  --purple-tint-20: rgba(111, 44, 145, 0.2);
  --purple-tint-40: rgba(111, 44, 145, 0.4);

  /* Teal tints */
  --teal-tint-08: rgba(13, 148, 136, 0.08);
  --teal-tint-40: rgba(13, 148, 136, 0.4);

  /* Saffron tints */
  --saffron-tint-08: rgba(217, 119, 6, 0.08);

  /* Clay tints */
  --clay-tint-08: rgba(154, 52, 18, 0.08);

  /* ===== Typography ===== */
  --font-display: 'Fraunces', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Font sizes */
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.75rem;
  --font-size-md: 0.8rem;
  --font-size-body: 0.88rem;
  --font-size-base: 0.9rem;
  --font-size-rg: 0.95rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.2rem;
  --font-size-2xl: 1.4rem;
  --font-size-3xl: 2.5rem;

  /* ===== Layout & Spacing ===== */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 28px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;
  --spacing-6xl: 60px;
  --section-padding: 100px;

  --max-width: 1200px;

  /* ===== Border Radius ===== */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-50: 50px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.06);
  --shadow-hover-lg: 0 16px 36px rgba(0, 0, 0, 0.06);
  --shadow-teal: 0 8px 24px rgba(13, 148, 136, 0.08);
  --shadow-teal-sm: 0 4px 12px rgba(13, 148, 136, 0.08);
  --shadow-purple: 0 8px 24px rgba(165, 54, 146, 0.35);
  --shadow-purple-sm: 0 8px 20px rgba(165, 54, 146, 0.3);

  /* ===== Transitions ===== */
  --transition-smooth: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: all 0.2s ease;
  --transition-base: all 0.25s ease;
  --transition-med: all 0.3s ease;
  --transition-snap: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-snap-lg: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== Z-Index ===== */
  --z-header: 1000;
  --z-menu-toggle: 1001;
  --z-mobile-nav: 999;
  --z-preloader: 9999;
  --z-container: 2;
  --z-canvas: 1;
}