/* =====================================================================
   Luxtra Design System — Colors + Typography
   Source of truth: luxtra/constants/tokens/primitives.ts + semantic.ts
   Default theme is DARK (cosmic). `.light` class flips to ivory.
   ===================================================================== */

/* ---------- FONTS ----------
   The serif DISPLAY faces (Playfair / Fraunces / Cinzel / Bodoni / Cormorant) paint the
   big headline + eyebrow text, so a late swap reflows the hero and spikes CLS (was 1.04 →
   perf score 74). `font-display: optional` shows the custom face only if it's ready inside
   the ~100ms block window (the above-the-fold ones are <link rel=preload>ed in the head, so
   they make it on normal connections) and otherwise keeps the fallback for that pageview
   with NO post-paint swap → zero font-driven CLS.
   Body (Inter) + mono (JetBrains) stay `swap`: tiny text, metrics ≈ system, negligible
   reflow — and body should always upgrade to Inter. Inter-Regular is preloaded too. */
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: optional; }
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-Bold.ttf") format("truetype"); font-weight: 700; font-display: optional; }

@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces72pt-Regular.ttf") format("truetype"); font-weight: 400; font-display: optional; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces72pt-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: optional; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces72pt-Bold.ttf") format("truetype"); font-weight: 700; font-display: optional; }
@font-face { font-family: "Cinzel"; src: url("fonts/Cinzel-Regular.ttf") format("truetype"); font-weight: 400; font-display: optional; }
/* Bodoni Moda, Cormorant Garamond, JetBrains Mono removed (2026-06-04) — unused brand weight.
   Numerals → Playfair (also has tabular lining nums), italic accents → Fraunces, mono → system. */

:root {
  /* ==== NEUTRAL (Cosmic) — 12-step dark scale ==== */
  --neutral-1:  #0C0618; /* app bg (deepest void)       */
  --neutral-2:  #120B24; /* card / section bg           */
  --neutral-3:  #1A1230; /* interactive element bg      */
  --neutral-4:  #22193C; /* interactive hover           */
  --neutral-5:  #2A2148; /* interactive active/selected */
  --neutral-6:  #352D54; /* subtle borders / separators */
  --neutral-7:  #443C68; /* interactive borders         */
  --neutral-8:  #574E7E; /* strong borders / focus ring */
  --neutral-9:  #6E6494; /* solid bg (tags, badges)     */
  --neutral-10: #7E75A4; /* solid hover                 */
  --neutral-11: #A09ABF; /* secondary text              */
  --neutral-12: #EEEDF5; /* primary text                */

  /* ==== VIOLET (Mystic) — 12-step dark scale ==== */
  --violet-1:  #0F0720;
  --violet-2:  #1A0B2E;
  --violet-3:  #271540;
  --violet-4:  #331D52;
  --violet-5:  #3F2564;
  --violet-6:  #4D3278;
  --violet-7:  #5E4190;
  --violet-8:  #7252AA;
  --violet-9:  #8B5CF6; /* primary brand violet */
  --violet-10: #9B71F8;
  --violet-11: #B89EFA;
  --violet-12: #E4DBFE;

  /* ==== GOLD (Celestial) — 12-step dark scale ==== */
  --gold-1:  #0F0D05;
  --gold-2:  #1C1808;
  --gold-3:  #2E2810;
  --gold-4:  #403818;
  --gold-5:  #524820;
  --gold-6:  #685C2C;
  --gold-7:  #82743A;
  --gold-8:  #A08F4C;
  --gold-9:  #C9A962; /* primary gold accent */
  --gold-10: #D4B872;
  --gold-11: #E8D5A3;
  --gold-12: #F5EDD0;

  /* ==== SEMANTIC STATUS ==== */
  --success:       #22C55E;
  --success-text:  #86EFAC;
  --success-subtle: rgba(34,197,94,0.12);
  --error:         #EF4444;
  --error-text:    #FCA5A5;
  --error-subtle:  rgba(239,68,68,0.12);
  --warning:       #F59E0B;
  --warning-text:  #FDE68A;
  --warning-subtle: rgba(245,158,11,0.12);
  --info:          #3B82F6;
  --info-text:     #93C5FD;
  --info-subtle:   rgba(59,130,246,0.12);

  /* ==== ELEMENT / PLANET (zodiac) ==== */
  --el-fire:  #EF4444;
  --el-earth: #84CC16;
  --el-air:   #38BDF8;
  --el-water: #8B5CF6;

  --planet-sun:     #FCD34D;
  --planet-moon:    #9CA3AF;
  --planet-mercury: #A3A3A3;
  --planet-venus:   #F472B6;
  --planet-mars:    #EF4444;
  --planet-jupiter: #FB923C;
  --planet-saturn:  #78716C;
  --planet-uranus:  #22D3EE;
  --planet-neptune: #8B5CF6;
  --planet-pluto:   #7C7C8A;

  /* ==== SEMANTIC FOUNDATIONS ==== */
  --bg-canvas:   var(--neutral-1);
  --bg-default:  var(--neutral-2);
  --bg-subtle:   var(--neutral-3);
  --bg-muted:    var(--neutral-4);
  --bg-overlay:  rgba(12,6,24,0.7);
  --bg-accent:   var(--violet-2);
  --bg-accent-muted: rgba(139,92,246,0.08);
  --bg-gold-muted:   rgba(201,169,98,0.08);

  --fg-primary:   var(--neutral-12);
  --fg-secondary: var(--neutral-11);
  --fg-muted:     var(--neutral-9);
  --fg-disabled:  var(--neutral-7);
  --fg-accent:    var(--violet-11);
  --fg-gold:      var(--gold-11);
  --fg-on-solid:  #FFFFFF;
  --fg-on-gold:   #0F0720;

  --border-default:  rgba(255,255,255,0.08);
  --border-muted:    rgba(255,255,255,0.04);
  --border-emphasis: rgba(255,255,255,0.16);
  --border-accent:   rgba(139,92,246,0.30);
  --border-gold:     rgba(201,169,98,0.25);
  --border-focus:    var(--violet-9);

  --separator:        rgba(255,255,255,0.06);
  --separator-strong: rgba(255,255,255,0.12);

  /* ==== GLASS + GRADIENTS ==== */
  --glass-light:  rgba(255,255,255,0.05);
  --glass-medium: rgba(255,255,255,0.08);
  --glass-heavy:  rgba(255,255,255,0.12);

  --grad-background:     linear-gradient(180deg, #0F0720 0%, #1A0B2E 50%, #0F0720 100%);
  --grad-cosmic:         linear-gradient(180deg, #0F0720 0%, #1A0B2E 50%, #2D1B4E 100%);
  --grad-card-default:   linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  --grad-card-accent:    linear-gradient(180deg, rgba(139,92,246,0.06), rgba(139,92,246,0.02));
  --grad-card-gold:      linear-gradient(180deg, rgba(201,169,98,0.08), rgba(201,169,98,0.02));
  --grad-card-elevated:  linear-gradient(180deg, #1E1438, #160E2C);
  --grad-violet-solid:   linear-gradient(90deg, #8B5CF6, #7C3AED);
  --grad-gold-solid:     linear-gradient(90deg, #C9A962, #B8953A, #C9A962);
  --grad-gold-shimmer:   linear-gradient(90deg, #C9A962, #E8D5A3, #C9A962);

  /* ==== RADII ==== */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-3xl: 24px; --r-full: 9999px;

  /* ==== SPACING ==== */
  --s-0: 0;    --s-05: 2px;  --s-1: 4px;   --s-15: 6px;
  --s-2: 8px;  --s-25: 10px; --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ==== SHADOWS + GLOW ==== */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,.30);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.35);
  --shadow-xl: 0 20px 48px rgba(0,0,0,.45);
  --glow-violet: 0 0 40px rgba(139,92,246,0.35), 0 0 80px rgba(139,92,246,0.18);
  --glow-gold:   0 0 32px rgba(201,169,98,0.28), 0 0 64px rgba(201,169,98,0.14);

  /* ==== MOTION ==== */
  --dur-fast: 150ms; --dur-normal: 250ms; --dur-slow: 400ms; --dur-slower: 600ms;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring-snappy: cubic-bezier(0.34, 1.2, 0.64, 1); /* approx for web */

  /* ==== TYPOGRAPHY FAMILIES ==== */
  --font-display:  "Playfair Display", Georgia, serif;
  --font-editorial: "Fraunces", Georgia, serif;
  --font-ritual:   "Cinzel", "Playfair Display", serif;  /* for ALL-CAPS section labels */
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:     ui-monospace, Menlo, monospace;

  /* ==== TYPE SCALE (iOS HIG aligned) ==== */
  --fs-caption2:   11px;
  --fs-caption:    12px;
  --fs-footnote:   13px;
  --fs-subhead:    14px;
  --fs-base:       16px;
  --fs-body:       17px;
  --fs-headline:   18px;
  --fs-title3:     20px;
  --fs-title2:     24px;
  --fs-title1:     28px;
  --fs-large:      34px;
  --fs-display:    48px;
  --fs-display-lg: 60px;
}

/* Light theme override */
.light {
  --neutral-1:  #FDFCFA; --neutral-2:  #F8F6F3; --neutral-3:  #F0EDE8;
  --neutral-4:  #E8E4DE; --neutral-5:  #DED9D2; --neutral-6:  #D1CBC2;
  --neutral-7:  #B8B0A5; --neutral-8:  #9E9588; --neutral-9:  #7A7268;
  --neutral-10: #6B6358; --neutral-11: #524B42; --neutral-12: #1C1814;

  --violet-9: #6D28D9; --violet-10: #5E1FC4; --violet-11: #5316B0; --violet-12: #2E0E62;
  --gold-9: #8B7520;   --gold-10: #7A6618;   --gold-11: #6B5A15;   --gold-12: #3D3410;

  --bg-overlay: rgba(0,0,0,0.4);
  --border-default: rgba(28,24,20,0.08);
  --border-muted:   rgba(28,24,20,0.04);
  --border-emphasis:rgba(28,24,20,0.16);
  --separator: rgba(28,24,20,0.06);
  --separator-strong: rgba(28,24,20,0.12);

  --grad-background: linear-gradient(180deg, #FDFCFA 0%, #F8F6F3 100%);
  --grad-cosmic:     linear-gradient(180deg, #FDFCFE 0%, #F8F5FD 50%, #F0EAFA 100%);
  --grad-card-default: linear-gradient(180deg, #FFFFFF, #FAF8F5);
}

/* ===== SEMANTIC TYPE ELEMENTS ===== */
html, body { background: var(--bg-canvas); color: var(--fg-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}
.h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-large); line-height: 1.15; letter-spacing: -0.015em; color: var(--fg-primary); }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title1); line-height: 1.2;  letter-spacing: -0.01em;  color: var(--fg-primary); }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-title2); line-height: 1.25; letter-spacing: -0.005em; color: var(--fg-primary); }
.h4 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-title3); line-height: 1.3;  color: var(--fg-primary); }

.editorial { font-family: var(--font-editorial); font-weight: 400; letter-spacing: 0.01em; }

.label, .eyebrow {
  font-family: var(--font-ritual);
  font-weight: 400;
  font-size: var(--fs-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-gold);
}

.body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body);     line-height: 1.55; color: var(--fg-primary); }
.body    { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-base);     line-height: 1.6;  color: var(--fg-primary); }
.body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-subhead);  line-height: 1.55; color: var(--fg-secondary); }
.caption { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-caption);  line-height: 1.4;  color: var(--fg-muted); letter-spacing: 0.02em; }
.mono    { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-subhead);  letter-spacing: 0.02em; color: var(--fg-secondary); }

.link    { color: var(--fg-accent); text-decoration: none; border-bottom: 1px solid rgba(184,158,250,0.3); }
.link:hover { color: var(--violet-12); border-bottom-color: var(--violet-11); }

/* Card + surface utilities */
.surface-card     { background: var(--bg-default); border: 1px solid var(--border-default); border-radius: var(--r-xl); }
.surface-glass    { background: var(--glass-medium); border: 1px solid var(--border-emphasis); border-radius: var(--r-2xl); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }
.surface-elevated { background-image: var(--grad-card-elevated); border: 1px solid var(--border-default); border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); }

/* Gold-on-dark text gradient */
.text-gold-gradient {
  background: linear-gradient(135deg, #E8D5A3 0%, #C9A962 45%, #E8D5A3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}