:root {
  /* ============================
     COLORS — Core Palette
  ============================ */

  /* Backgrounds */
  --color-bg-primary: #0d0d0d;
  --color-bg-secondary: #161616;
  --color-bg-tertiary: #1e1e1e;
  --color-bg-elevated: #252525;
  --color-bg-overlay: rgba(0, 0, 0, 0.75);
  --color-bg-overlay-heavy: rgba(0, 0, 0, 0.85);
  --color-bg-overlay-dense: rgba(0, 0, 0, 0.95);

  /* Surfaces */
  --color-surface-dark: #111111;
  --color-surface-mid: #1a1a1a;
  --color-surface-light: #2a2a2a;
  --color-surface-hover: #333333;

  /* Text */
  --color-text-primary: #f0ece6;
  --color-text-secondary: #a8a29e;
  --color-text-tertiary: #6b6560;
  --color-text-muted: #4a4540;
  --color-text-inverse: #0d0d0d;

  /* Accent — warm gold */
  --color-accent: #c9a55c;
  --color-accent-light: #dbb978;
  --color-accent-dark: #a07d3a;
  --color-accent-muted: rgba(201, 165, 92, 0.15);

  /* Secondary accent — deep teal */
  --color-secondary: #2d6b5e;
  --color-secondary-light: #3d8b7a;
  --color-secondary-dark: #1d4b3e;
  --color-secondary-muted: rgba(45, 107, 94, 0.15);

  /* Feedback */
  --color-error: #c45d5d;
  --color-success: #5da67a;
  --color-warning: #c9a55c;

  /* Borders */
  --color-border-subtle: rgba(240, 236, 230, 0.06);
  --color-border-default: rgba(240, 236, 230, 0.1);
  --color-border-strong: rgba(240, 236, 230, 0.2);
  --color-border-accent: rgba(201, 165, 92, 0.3);

  /* ============================
     TYPOGRAPHY
  ============================ */

  /* Font families */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font sizes — modular scale (1.250 ratio) */
  --text-xs: 0.64rem;     /* 10.24px */
  --text-sm: 0.8rem;      /* 12.8px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.25rem;     /* 20px */
  --text-lg: 1.563rem;    /* 25px */
  --text-xl: 1.953rem;    /* 31.25px */
  --text-2xl: 2.441rem;   /* 39px */
  --text-3xl: 3.052rem;   /* 48.8px */
  --text-4xl: 3.815rem;   /* 61px */
  --text-5xl: 4.768rem;   /* 76.3px */
  --text-hero: clamp(3rem, 8vw, 7rem);

  /* Font weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --leading-loose: 2.0;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.03em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.15em;
  --tracking-caps: 0.2em;

  /* ============================
     SPACING — 4px base unit
  ============================ */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-40: 10rem;    /* 160px */

  /* Section spacing */
  --section-padding-y: clamp(5rem, 12vh, 10rem);
  --section-padding-x: clamp(1.5rem, 5vw, 4rem);

  /* ============================
     GRID
  ============================ */
  --grid-max-width: 1200px;
  --grid-columns: 12;
  --grid-gutter: var(--space-6);
  --grid-gutter-sm: var(--space-4);

  /* ============================
     BORDERS & RADIUS
  ============================ */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --border-thin: 1px;
  --border-default: 2px;
  --border-thick: 3px;

  /* ============================
     SHADOWS
  ============================ */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 30px rgba(201, 165, 92, 0.15);
  --shadow-selected: 0 4px 30px rgba(201, 165, 92, 0.3);
  --shadow-inner: inset 0 2px 8px rgba(0, 0, 0, 0.3);

  /* ============================
     MOTION / ANIMATION
  ============================ */

  /* Durations */
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --duration-entrance: 600ms;
  --duration-flip: 900ms;

  /* Easings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-flip: cubic-bezier(0.4, 0.0, 0.15, 1);

  /* Transitions */
  --transition-colors: color var(--duration-normal) var(--ease-smooth),
                       background-color var(--duration-normal) var(--ease-smooth),
                       border-color var(--duration-normal) var(--ease-smooth);
  --transition-opacity: opacity var(--duration-slow) var(--ease-smooth);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-all: all var(--duration-normal) var(--ease-smooth);

  /* ============================
     Z-INDEX
  ============================ */
  --z-base: 0;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-flip: 700;
  --z-sidenav: 800;
  --z-toolbar: 900;
  --z-lightbox: 1000;
  --z-auth: 10000;

  /* ============================
     BREAKPOINTS (for reference)
     Use in @media queries directly
  ============================ */
  /* --bp-sm: 480px   */
  /* --bp-md: 768px   */
  /* --bp-lg: 1024px  */
  /* --bp-xl: 1280px  */
  /* --bp-2xl: 1536px */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-entrance: 0ms;
    --duration-flip: 0ms;
  }
}