/* ==========================================================================
   ELM-O-SANAT MASTER DESIGN TOKENS
   Maybach Obsidian & Champagne Gold Architectural Standard
   ========================================================================== */

:root {
  /* --- Obsidian & Midnight Lounge Surface Hierarchy --- */
  --bg-deep-void: #02050b;
  --bg-obsidian: #050a14;
  --bg-surface-1: #08101e;
  --bg-surface-2: #0c172b;
  --bg-navy-midnight: #061020;
  --bg-navy-regal: #0a1b34;
  --bg-card-glass: rgba(8, 16, 30, 0.72);
  --bg-card-glass-hover: rgba(12, 23, 43, 0.9);
  --bg-cockpit: rgba(4, 8, 17, 0.84);

  /* --- Brushed Champagne Gold Metallic Spectrum --- */
  --gold-100: #fbf3de;
  --gold-200: #f2dfa8;
  --gold-300: #e3c16e;
  --gold-400: #d4a644;
  --gold-500: #be8c28;
  --gold-600: #916719;
  --gold-700: #63440d;

  /* Compatibility Aliases */
  --gold-champagne: var(--gold-200);
  --gold-supernal: var(--gold-300);

  /* Master Metallic Gradients */
  --gradient-gold: linear-gradient(135deg, #fbf3de 0%, #edd184 30%, #c99733 72%, #916719 100%);
  --gradient-gold-soft: linear-gradient(135deg, rgba(242, 223, 168, 0.14) 0%, rgba(190, 140, 40, 0.08) 100%);
  --gradient-gold-sheen: linear-gradient(90deg, transparent 0%, rgba(251, 243, 222, 0.28) 50%, transparent 100%);
  --gradient-card-border: linear-gradient(135deg, rgba(227, 193, 110, 0.35) 0%, rgba(190, 140, 40, 0.12) 55%, rgba(255, 255, 255, 0.04) 100%);

  /* --- Refined Monochromatic Ink Scale --- */
  --text-pure: #f8fafc;
  --text-pure-white: #ffffff;
  --text-platinum: #e2e8f0;
  --text-muted: #b4c2d6;
  --text-silver-muted: #b4c2d6;
  --text-subtle: #7f91aa;
  --text-slate-dim: #7f91aa;

  /* --- Semantic Accents --- */
  --status-success: #4ade80;
  --status-warning: #fbbf24;
  --status-danger: #f87171;
  --status-info: #60a5fa;

  /* --- Precision Hairlines & Glassmorphism --- */
  --hairline-gold: rgba(227, 193, 110, 0.18);
  --hairline-gold-active: rgba(242, 223, 168, 0.48);
  --border-gold-subtle: rgba(227, 193, 110, 0.18);
  --border-gold-medium: rgba(242, 223, 168, 0.44);
  --border-glass-specular: rgba(255, 255, 255, 0.06);

  /* --- Depth & Architectural Elevation --- */
  --shadow-subtle: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-elevation: 0 18px 48px rgba(0, 0, 0, 0.72), 0 0 1px rgba(227, 193, 110, 0.25);
  --shadow-card-hover: 0 24px 64px rgba(0, 0, 0, 0.85), 0 0 32px rgba(212, 166, 68, 0.12);
  --shadow-emblem-glow: 0 0 70px rgba(212, 166, 68, 0.22), 0 28px 60px rgba(0, 0, 0, 0.92);

  /* --- Silky Compositor Curves --- */
  --ease-maybach: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 220ms;
  --duration-normal: 420ms;
  --duration-slow: 750ms;

  /* --- Typography --- */
  --font-main: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Global Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-family: var(--font-main);
  background: var(--bg-deep-void);
  color: var(--text-platinum);
  scroll-behavior: smooth;
  font-size: 16px;
  direction: rtl;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  background: var(--bg-deep-void);
  position: relative;
  overflow-x: hidden;
  line-height: 1.7;
}

/* Gold Gradient Text */
.text-gold-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.num-tabular {
  font-variant-numeric: tabular-nums;
}

/* Scroll Progress Hairline */
.luxury-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2000;
  pointer-events: none;
  background: transparent;
}

.luxury-scroll-progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: right center;
  transform: scaleX(0);
  background: var(--gradient-gold);
  transition: transform 80ms linear;
}

/* Choreographed Scroll Reveal (GPU Compositor Only) */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 700ms var(--ease-maybach), transform 700ms var(--ease-maybach);
  will-change: opacity, transform;
}

[data-reveal="scale"] {
  transform: translate3d(0, 14px, 0) scale(0.975);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep-void);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-600), var(--gold-400));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-300);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}