/* ==========================================================================
   Design Tokens
   All CSS custom properties for the panoramic scroll concept.
   Load this first — every other stylesheet depends on these variables.
   ========================================================================== */

:root {
  /* Brand colors */
  --charcoal:     #1A1A1A;
  --gold:         #D4A843;
  --gold-hover:   #E8C06A;
  --coral:        #E74C3C;
  --teal:         #1ABC9C;

  /* Glass / surface */
  --glass-bg:     rgba(0, 0, 0, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur:   blur(14px);

  /* Text */
  --white:        #FFFFFF;
  --white-dim:    rgba(255, 255, 255, 0.7);
  --white-muted:  rgba(255, 255, 255, 0.45);

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  /* Layout */
  --panel-width:   520px;
  --panel-padding: 48px;
}