/* ==========================================================================
   PeakPropHits Enterprise Design System — Luxury Dark & Gold Tokens
   Matching Official Pyramid-S Brand Identity
   ========================================================================== */

:root {
  /* Brand Color Palette — Light Warm Canvas & Warm Champagne Gold */
  --color-canvas: #FAF8F5;
  --color-canvas-subtle: #F5EFE6;
  --color-canvas-muted: #ECE3D4;
  --color-canvas-pure: #FFFFFF;

  /* Luxury Palette matching Reference Screenshot */
  --color-primary: #0C0807;
  --color-primary-light: #1A120E;
  --color-secondary: #2C201A;

  /* Metallic Gold Palette matching Screenshot ("Transform.") */
  --color-gold: #C89B55;
  --color-gold-light: #ECC89B;
  --color-gold-dark: #A57732;
  --color-gold-tint: rgba(200, 155, 85, 0.1);
  --color-gold-glow: rgba(200, 155, 85, 0.3);

  --gradient-gold: linear-gradient(135deg, #ECC89B 0%, #C89B55 50%, #B28135 100%);
  --gradient-gold-warm: linear-gradient(135deg, #F3D7B5 0%, #D4A359 50%, #A57732 100%);
  --gradient-gold-shimmer: linear-gradient(90deg, rgba(200, 155, 85, 0.1) 0%, rgba(255, 242, 223, 0.8) 50%, rgba(200, 155, 85, 0.1) 100%);
  --gradient-gold-beam: linear-gradient(90deg, transparent 0%, rgba(200, 155, 85, 0.85) 50%, transparent 100%);
  --gradient-light-mesh: radial-gradient(circle at 12% 20%, rgba(200, 155, 85, 0.15) 0%, transparent 48%), radial-gradient(circle at 85% 75%, rgba(236, 200, 155, 0.12) 0%, transparent 48%), #FAF8F5;
  --gradient-light-mesh-alt: radial-gradient(circle at 80% 20%, rgba(200, 155, 85, 0.12) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(236, 200, 155, 0.1) 0%, transparent 50%), #FFFFFF;
  --gradient-light-card: linear-gradient(145deg, #FFFFFF 0%, #FCFAF7 100%);
  --spotlight-gold: rgba(200, 155, 85, 0.12);

  --color-canvas-dark: #1A120E;

  --color-text: #161210;
  --color-text-headings: #0C0807;
  --color-text-muted: #4A413D;
  --color-text-light: #635852;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-muted: #5E534D;

  --color-surface: #FFFFFF;
  --color-surface-glass: rgba(252, 250, 247, 0.9);
  --color-surface-dark-glass: rgba(12, 8, 7, 0.88);

  --color-border: rgba(12, 8, 7, 0.09);
  --color-border-strong: rgba(12, 8, 7, 0.18);
  --color-border-dark: rgba(200, 162, 122, 0.2);
  --color-border-gold: rgba(200, 162, 122, 0.45);

  --color-success: #1E7E34;
  --color-error: #B02A37;
  --color-warning: #B38600;

  /* Typography Stacks */
  --font-display: 'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, Menlo, monospace;

  /* Spacing Scale */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs:  0.5rem;   /* 8px */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4.5rem;   /* 72px */
  --space-4xl: 6rem;     /* 96px */

  /* Layout Containers */
  --container-max: 1320px;
  --container-narrow: 980px;
  --container-editorial: 840px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Elevation & Shadows */
  --shadow-subtle: 0 2px 8px rgba(12, 8, 7, 0.04);
  --shadow-sm: 0 4px 14px rgba(12, 8, 7, 0.07);
  --shadow-md: 0 12px 30px rgba(12, 8, 7, 0.1);
  --shadow-lg: 0 20px 50px rgba(12, 8, 7, 0.15);
  --shadow-gold: 0 10px 35px rgba(200, 162, 122, 0.28);
  --shadow-dark: 0 25px 60px rgba(0, 0, 0, 0.6);

  /* Transitions */
  --transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index Scale */
  --z-base: 1;
  --z-nav: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 500;
  --z-modal: 550;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-smooth: 0.01ms;
    --transition-slow: 0.01ms;
  }
}