/* ── Design Tokens, View Transitions & Fallbacks ───────── */

/* ── Cross-document view transitions ─────────────────────────
   Native browser support (Chrome 126+, Safari 18.2+); no-ops
   elsewhere. Site's primary interaction is page-to-page nav,
   so this smooths every internal link without extra JS. ── */
@view-transition {
  navigation: auto;
}

@supports (view-transition-name: site-logo) {
  .nav-logo {
    view-transition-name: site-logo;
  }
  .page-title {
    view-transition-name: page-title;
  }
}

::view-transition-old(site-logo),
::view-transition-new(site-logo) {
  animation-duration: 0.3s;
}

::view-transition-old(root) {
  animation: themeWipeOld 0.35s ease-in-out forwards;
}
::view-transition-new(root) {
  animation: themeWipeNew 0.35s ease-in-out forwards;
}

@keyframes themeWipeOld {
  to { opacity: 0; }
}
@keyframes themeWipeNew {
  from { opacity: 0; transform: scale(0.995); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Content Visibility Optimization ─────────────────────── */
.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 300px;
}

/* ── Token System ─────────────────────────────────────────── */
:root {
  --bg: #0f0e0c;
  --bg2: #161513;
  --bg3: #221c16;
  --line: rgba(255, 255, 255, 0.09);
  --text: #eeeae2;
  --muted: #b3ada4;
  --accent: #d4a85a;
  --accent2: #6dbfaa;
  --accent-a07: rgba(212, 168, 90, 0.07);
  --accent-a12: rgba(212, 168, 90, 0.12);
  --text-a10: rgba(238, 234, 226, 0.10);
  --text-a40: rgba(238, 234, 226, 0.40);
  --accent-a35: rgba(212, 168, 90, 0.35);
  --accent-a40: rgba(212, 168, 90, 0.4);
  --accent-a45: rgba(212, 168, 90, 0.45);
  --accent-a80: rgba(212, 168, 90, 0.8);
  --heading: #f8f5ee;
  --display-serif: "Playfair Display", Georgia, serif;
  --serif: "Playfair Display", Georgia, serif;
  --mono: "DM Mono", monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --nav-scrolled-bg: rgba(15, 14, 12, 0.88);
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 12px;
  --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --nav-h: 76px;
  --surface: #171512;
  /* Theme-invariant decorative glow */
  --glow-gold: #d4a85a;
  --glow-gold-a18: rgba(212, 168, 90, 0.18);
  --glow-gold-a30: rgba(212, 168, 90, 0.3);
  --glow-gold-a35: rgba(212, 168, 90, 0.35);
  --glow-gold-a90: rgba(212, 168, 90, 0.9);
  --glow-teal: #6dbfaa;
  --glow-teal-a15: rgba(109, 191, 170, 0.15);
  --glow-teal-a25: rgba(109, 191, 170, 0.25);
  --glow-teal-a35: rgba(109, 191, 170, 0.35);
  --glow-teal-a70: rgba(109, 191, 170, 0.7);
  --glow-green: #4ade80;
  --glow-green-a35: rgba(74, 222, 128, 0.35);
  --glow-green-a50: rgba(74, 222, 128, 0.5);
  --glow-red: #ef4444;
  --glow-red-a35: rgba(239, 68, 68, 0.35);
  --glow-blue: #5b9bd5;
  --glow-blue-a35: rgba(91, 155, 213, 0.35);
  --glow-blue-a50: rgba(91, 155, 213, 0.5);
  --glow-violet: #a78bfa;
  --glow-violet-a35: rgba(167, 139, 250, 0.35);
  --glow-violet-a50: rgba(167, 139, 250, 0.5);
  --glow-coral: #e2685f;
  --glow-coral-a35: rgba(226, 104, 95, 0.35);
  --glow-coral-a50: rgba(226, 104, 95, 0.5);
}

html[data-theme="light"] {
  --bg: #faf8f4;
  --bg2: #ffffff;
  --bg3: #f3edd9;
  --line: rgba(0, 0, 0, 0.08);
  --text: #1f1b16;
  --muted: #4a4035;
  --accent: #b45309;
  --accent2: #0d9488;
  --accent-a07: rgba(180, 83, 9, 0.08);
  --accent-a12: rgba(180, 83, 9, 0.14);
  --text-a10: rgba(31, 27, 22, 0.10);
  --text-a40: rgba(31, 27, 22, 0.45);
  --accent-a35: rgba(180, 83, 9, 0.38);
  --accent-a40: rgba(180, 83, 9, 0.44);
  --accent-a45: rgba(180, 83, 9, 0.5);
  --accent-a80: rgba(180, 83, 9, 0.85);
  --heading: #090705;
  --nav-scrolled-bg: rgba(250, 248, 244, 0.96);
  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-blur: 8px;
  --card-shadow: none;
  --surface: #ffffff;
  --glow-gold: #d97706;
  --glow-teal: #0d9488;
  --glow-green: #16a34a;
  --glow-green-a35: rgba(22, 163, 74, 0.25);
  --glow-red: #dc2626;
  --glow-red-a35: rgba(220, 38, 38, 0.25);
  --glow-blue: #2563eb;
  --glow-blue-a35: rgba(37, 99, 235, 0.25);
  --glow-violet: #7c3aed;
  --glow-violet-a35: rgba(124, 58, 237, 0.25);
  --glow-coral: #ea580c;
  --glow-coral-a35: rgba(234, 88, 12, 0.25);
}

/* ── Dynamic Accent Color Themes ───────────────────────────── */

/* Cyber Emerald ⚡ */
html[data-accent="emerald"] {
  --accent: #10b981;
  --accent2: #3b82f6;
  --accent-a07: rgba(16, 185, 129, 0.07);
  --accent-a12: rgba(16, 185, 129, 0.12);
  --accent-a35: rgba(16, 185, 129, 0.35);
  --accent-a40: rgba(16, 185, 129, 0.4);
  --accent-a45: rgba(16, 185, 129, 0.45);
  --accent-a80: rgba(16, 185, 129, 0.8);
  --glow-gold: #10b981;
  --glow-gold-a18: rgba(16, 185, 129, 0.18);
  --glow-gold-a30: rgba(16, 185, 129, 0.3);
  --glow-gold-a35: rgba(16, 185, 129, 0.35);
  --glow-gold-a90: rgba(16, 185, 129, 0.9);
  --glow-teal: #3b82f6;
  --glow-teal-a15: rgba(59, 130, 246, 0.15);
  --glow-teal-a25: rgba(59, 130, 246, 0.25);
  --glow-teal-a35: rgba(59, 130, 246, 0.35);
  --glow-teal-a70: rgba(59, 130, 246, 0.7);
}

/* Electric Violet 🔮 */
html[data-accent="violet"] {
  --accent: #a855f7;
  --accent2: #ec4899;
  --accent-a07: rgba(168, 85, 247, 0.07);
  --accent-a12: rgba(168, 85, 247, 0.12);
  --accent-a35: rgba(168, 85, 247, 0.35);
  --accent-a40: rgba(168, 85, 247, 0.4);
  --accent-a45: rgba(168, 85, 247, 0.45);
  --accent-a80: rgba(168, 85, 247, 0.8);
  --glow-gold: #a855f7;
  --glow-gold-a18: rgba(168, 85, 247, 0.18);
  --glow-gold-a30: rgba(168, 85, 247, 0.3);
  --glow-gold-a35: rgba(168, 85, 247, 0.35);
  --glow-gold-a90: rgba(168, 85, 247, 0.9);
  --glow-teal: #ec4899;
  --glow-teal-a15: rgba(236, 72, 153, 0.15);
  --glow-teal-a25: rgba(236, 72, 153, 0.25);
  --glow-teal-a35: rgba(236, 72, 153, 0.35);
  --glow-teal-a70: rgba(236, 72, 153, 0.7);
}

/* Ocean Cyan 🌊 */
html[data-accent="cyan"] {
  --accent: #06b6d4;
  --accent2: #6366f1;
  --accent-a07: rgba(6, 182, 212, 0.07);
  --accent-a12: rgba(6, 182, 212, 0.12);
  --accent-a35: rgba(6, 182, 212, 0.35);
  --accent-a40: rgba(6, 182, 212, 0.4);
  --accent-a45: rgba(6, 182, 212, 0.45);
  --accent-a80: rgba(6, 182, 212, 0.8);
  --glow-gold: #06b6d4;
  --glow-gold-a18: rgba(6, 182, 212, 0.18);
  --glow-gold-a30: rgba(6, 182, 212, 0.3);
  --glow-gold-a35: rgba(6, 182, 212, 0.35);
  --glow-gold-a90: rgba(6, 182, 212, 0.9);
  --glow-teal: #6366f1;
  --glow-teal-a15: rgba(99, 102, 241, 0.15);
  --glow-teal-a25: rgba(99, 102, 241, 0.25);
  --glow-teal-a35: rgba(99, 102, 241, 0.35);
  --glow-teal-a70: rgba(99, 102, 241, 0.7);
}

/* Ruby Flame 🔴 */
html[data-accent="ruby"] {
  --accent: #f43f5e;
  --accent2: #fb923c;
  --accent-a07: rgba(244, 63, 94, 0.07);
  --accent-a12: rgba(244, 63, 94, 0.12);
  --accent-a35: rgba(244, 63, 94, 0.35);
  --accent-a40: rgba(244, 63, 94, 0.4);
  --accent-a45: rgba(244, 63, 94, 0.45);
  --accent-a80: rgba(244, 63, 94, 0.8);
  --glow-gold: #f43f5e;
  --glow-gold-a18: rgba(244, 63, 94, 0.18);
  --glow-gold-a30: rgba(244, 63, 94, 0.3);
  --glow-gold-a35: rgba(244, 63, 94, 0.35);
  --glow-gold-a90: rgba(244, 63, 94, 0.9);
  --glow-teal: #fb923c;
  --glow-teal-a15: rgba(251, 146, 60, 0.15);
  --glow-teal-a25: rgba(251, 146, 60, 0.25);
  --glow-teal-a35: rgba(251, 146, 60, 0.35);
  --glow-teal-a70: rgba(251, 146, 60, 0.7);
}

/* Midnight Prism 🌌 */
html[data-accent="prism"] {
  --accent: #cbd5e1;
  --accent2: #94a3b8;
  --accent-a07: rgba(203, 213, 225, 0.07);
  --accent-a12: rgba(203, 213, 225, 0.12);
  --accent-a35: rgba(203, 213, 225, 0.35);
  --accent-a40: rgba(203, 213, 225, 0.4);
  --accent-a45: rgba(203, 213, 225, 0.45);
  --accent-a80: rgba(203, 213, 225, 0.8);
  --glow-gold: #cbd5e1;
  --glow-gold-a18: rgba(203, 213, 225, 0.18);
  --glow-gold-a30: rgba(203, 213, 225, 0.3);
  --glow-gold-a35: rgba(203, 213, 225, 0.35);
  --glow-gold-a90: rgba(203, 213, 225, 0.9);
  --glow-teal: #94a3b8;
  --glow-teal-a15: rgba(148, 163, 184, 0.15);
  --glow-teal-a25: rgba(148, 163, 184, 0.25);
  --glow-teal-a35: rgba(148, 163, 184, 0.35);
  --glow-teal-a70: rgba(148, 163, 184, 0.7);
}

/* Light theme overrides for accent presets */
html[data-theme="light"][data-accent="emerald"] {
  --accent: #059669;
  --accent2: #2563eb;
  --glow-gold: #059669;
  --glow-teal: #2563eb;
}
html[data-theme="light"][data-accent="violet"] {
  --accent: #9333ea;
  --accent2: #db2777;
  --glow-gold: #9333ea;
  --glow-teal: #db2777;
}
html[data-theme="light"][data-accent="cyan"] {
  --accent: #0891b2;
  --accent2: #4f46e5;
  --glow-gold: #0891b2;
  --glow-teal: #4f46e5;
}
html[data-theme="light"][data-accent="ruby"] {
  --accent: #e11d48;
  --accent2: #ea580c;
  --glow-gold: #e11d48;
  --glow-teal: #ea580c;
}
html[data-theme="light"][data-accent="prism"] {
  --accent: #475569;
  --accent2: #64748b;
  --glow-gold: #475569;
  --glow-teal: #64748b;
}



/* ── Site-wide Light Mode Glow & Shadow Refinements ────────────── */
html[data-theme="light"] .hero-glow,
html[data-theme="light"] .glow-orb,
html[data-theme="light"] .ambient-glow,
html[data-theme="light"] .card-gradient-border::before {
  display: none !important;
}

/* Light mode card elevation & interactive shadow overrides */
html[data-theme="light"] .status-card,
html[data-theme="light"] .glass-card,
html[data-theme="light"] .quick-nav-card,
html[data-theme="light"] .access-card-inner {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* ── Custom Scrollbar & Scroll Progress Indicator ───────────── */

/* Modern standard scrollbar styling (Firefox & modern browsers) */
@supports (scrollbar-width: thin) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg);
  }
}

/* WebKit-based browsers (Chrome, Edge, Safari, Brave) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  border-radius: 99px;
  border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--glow-gold, #d4a85a) 0%, var(--glow-teal, #6dbfaa) 100%);
}

::-webkit-scrollbar-thumb:active {
  background: var(--accent2);
}

::-webkit-scrollbar-corner {
  background: var(--bg);
}



/* ── Font-face fallbacks (reduce FOUT/CLS) ────────────────── */
@font-face {
  font-family: "Playfair Display";
  font-display: swap;
  src: local("Georgia");
  size-adjust: 100%;
}

@font-face {
  font-family: "DM Mono";
  font-display: swap;
  src: local("Courier New");
  size-adjust: 95%;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: local("Arial"), local("Helvetica");
  size-adjust: 100%;
}