:root {
  /* ===== COLOR ===== */
  --primary-900: #071B3A;
  --primary-800: #0B2854;
  --primary-700: #123D70;
  --primary-600: #244A7A;

  --gold-700: #B8860B;
  --gold-600: #C9971A;
  --gold-500: #D9A91A;
  --gold-200: #F4D98A;
  --gold-100: #FBF0C9;

  --white: #FFFFFF;

  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-400: #94A3B8;
  --gray-600: #475569;
  --gray-800: #1E293B;
  --black: #0F172A;

  --success: #168A5B;
  --warning: #D99A16;
  --error: #C0392B;
  --info: #2F6FA3;

  /* ===== TYPE ===== */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Montserrat", -apple-system, sans-serif;

  /* ===== LAYOUT ===== */
  --container-width: 1200px;
  --pad-desktop: 32px;
  --pad-tablet: 24px;
  --pad-mobile: 20px;

  /* ===== SPACING (8px system) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ===== RADIUS ===== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ===== SHADOW ===== */
  --shadow-card: 0 4px 20px rgba(7, 27, 58, 0.08);
  --shadow-card-hover: 0 12px 32px rgba(7, 27, 58, 0.14);
  --shadow-header: 0 2px 16px rgba(7, 27, 58, 0.08);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* ===== Z-INDEX ===== */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}