/* ==========================================================================
   DESIGN TOKENS & SYSTEM VARIABLES
   Aesthetic: Dark Luxury + Editorial Swiss Precision + Technical Architecture
   ========================================================================== */

:root {
  /* --- COLOR SYSTEM --- */
  --bg-obsidian: #08080a;
  --bg-canvas: #0b0b0e;
  --bg-surface: #111116;
  --bg-surface-elevated: #17171e;
  --bg-surface-glass: rgba(17, 17, 22, 0.75);
  
  /* Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.28);
  --border-accent: rgba(229, 169, 60, 0.4);

  /* Typography Colors */
  --text-primary: #f6f5ef;       /* Warm ivory */
  --text-secondary: #9c9ca9;     /* Muted neutral platinum */
  --text-tertiary: #585868;      /* Subtle slate for telemetry */
  --text-inverse: #08080a;

  /* Signature Accent (Warm Amber / Burnished Gold) */
  --accent-gold: #e5a93c;
  --accent-gold-hover: #f5be58;
  --accent-gold-dim: rgba(229, 169, 60, 0.12);
  --accent-gold-glow: rgba(229, 169, 60, 0.28);

  /* Telemetry Secondary (Ice Blue for Data Signals) */
  --signal-blue: #60a5fa;
  --signal-blue-dim: rgba(96, 165, 250, 0.12);
  --signal-green: #34d399;
  --signal-green-dim: rgba(52, 211, 153, 0.15);

  /* --- BESPOKE TYPOGRAPHY SYSTEM (USER-PROVIDED FONTS ONLY) --- */
  --font-aquire: 'Aquire', sans-serif;
  --font-meqanor: 'MEQANOR', 'Aquire', sans-serif;
  --font-giamlass: 'Giamlass', serif;
  --font-script: 'Halimun', cursive;
  
  /* System font mappings - powered by user's fonts */
  --font-display: 'MEQANOR', 'Aquire', sans-serif;
  --font-syne: 'Aquire', sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* User-Provided Bespoke Typefaces */
@font-face {
  font-family: 'Aquire';
  src: url('../assets/fonts/aquire/Aquire.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aquire';
  src: url('../assets/fonts/aquire/Aquire-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aquire';
  src: url('../assets/fonts/aquire/Aquire-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Halimun';
  src: url('../assets/fonts/halimun/Halimun.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MEQANOR';
  src: url('../assets/fonts/meqanor/MEQANOR.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Giamlass';
  src: url('../assets/fonts/giamlass/Giamlass-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  /* --- FLUID TYPOGRAPHY SCALE (clamp-based) --- */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);    /* 12-13px */
  --text-sm: clamp(0.8125rem, 0.77rem + 0.2vw, 0.875rem);   /* 13-14px */
  --text-base: clamp(0.9375rem, 0.89rem + 0.25vw, 1.0625rem);/* 15-17px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);   /* 18-21px */
  --text-xl: clamp(1.375rem, 1.25rem + 0.65vw, 1.75rem);    /* 22-28px */
  --text-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);      /* 28-40px */
  --text-3xl: clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);     /* 36-60px */
  --text-4xl: clamp(3rem, 2.2rem + 4vw, 6rem);              /* 48-96px */
  --text-monumental: clamp(3.2rem, 2.3rem + 5.5vw, 8.5rem); /* 52-136px */

  /* --- SPACING SCALE --- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* --- GEOMETRY & RADIUS --- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* --- MOTION & EASING --- */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-normal: 350ms;
  --duration-slow: 700ms;

  /* --- DEPTH & SHADOWS --- */
  --shadow-subtle: 0 4px 20px -2px rgba(0, 0, 0, 0.6);
  --shadow-elevated: 0 12px 36px -4px rgba(0, 0, 0, 0.8), 0 0 1px 1px var(--border-subtle);
  --shadow-glow: 0 0 40px -10px var(--accent-gold-glow);

  /* --- Z-INDEX LAYERING --- */
  --z-bg-canvas: 0;
  --z-bg-ghost: 1;
  --z-noise: 2;
  --z-content: 10;
  --z-hud: 50;
  --z-header: 100;
  --z-modal: 200;
  --z-cursor: 999;
  --z-preloader: 1000;
}