/* 
   main.css - Kemet Cinematic Archives
   Centralized CSS Custom Properties (Tokens)
*/

:root {
  /* Color Palette - Neo-Luxor Theme */
  --color-obsidian: #050403;       /* Background deepest black */
  --color-basalt: #1a1612;         /* Slightly lighter stone */
  --color-sand: #d4c59e;           /* Primary text / aged paper */
  --color-gold: #c9a84c;           /* Metallic accent */
  --color-gold-bright: #ffd700;    /* Hover accent */
  --color-gold-dark: #aa7c11;      /* Deep accent */
  --color-lapis: #0a233a;          /* Secondary depth */
  --color-cyan: #00d2ff;           /* Holographic / Sci-fi contrast */
  
  /* Typography */
  --font-display: 'Cinzel Decorative', serif;
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Space Grotesk', sans-serif;
  --font-accent: 'Syne', sans-serif;
  
  /* Spacing (Golden Ratio Scale roughly) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.618rem;
  --space-lg: 2.618rem;
  --space-xl: 4.236rem;
  --space-xxl: 6.854rem;

  /* Z-Index Depth Zones */
  --z-bg: -10;
  --z-base: 0;
  --z-overlay: 10;
  --z-nav: 50;
  --z-cursor: 9999;
  --z-modal: 1000;
  
  /* Transitions */
  --trans-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --trans-medium: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-slow: 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base gradients and reusable utilities */
.text-gradient-gold {
  background: linear-gradient(to right, var(--color-gold-dark), var(--color-gold-bright), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ra-ray-divider {
  height: 2px;
  width: 100px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  margin: var(--space-md) auto;
}

.premium-glass-panel {
  background: rgba(26, 22, 18, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 4px;
}