/* ========================================
   DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ======================================== */

:root {
  /* -------- COLORS -------- */
  --color-bg:          #0a0a0a;
  --color-surface:     #111111;
  --color-surface-2:   #1a1a1a;
  --color-border:      #2a2a2a;
  --color-gold:        #c9a84c;
  --color-copper:      #b87333;
  --color-gold-muted:  #c9a84c33;
  --color-gold-hover:  #d4b560;
  --color-text:        #f0f0f0;
  --color-text-muted:  #888888;
  --color-text-faint:  #444444;
  --color-success:     #22c55e;
  --color-error:       #ef4444;

  /* -------- TYPOGRAPHY -------- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* -------- FONT SIZES -------- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* -------- SPACING -------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9:  128px;

  /* -------- BORDER RADIUS -------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* -------- TRANSITIONS -------- */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   600ms ease;

  /* -------- SHADOWS -------- */
  --shadow-gold: 0 0 24px rgba(201, 168, 76, 0.15);
  --shadow-gold-strong: 0 0 40px rgba(201, 168, 76, 0.25);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.6);

  /* -------- Z-INDEX -------- */
  --z-below:   -1;
  --z-base:     0;
  --z-above:    1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;

  /* -------- LAYOUT -------- */
  --container-max: 1280px;
  --navbar-height: 72px;
}