/* ============================================
   DESIGN SYSTEM — Single Source of Truth
   All shared tokens, theme overrides, backgrounds
   ============================================ */

:root {
    /* ── Colors ──────────────────────────────── */
    --color-white: #fbfbfd;
    --color-gray-50: #f5f5f7;
    --color-gray-100: #e8e8ed;
    --color-gray-200: #d2d2d7;
    --color-gray-300: #aeaeb2;
    --color-gray-400: #86868b;
    --color-gray-500: #6e6e73;
    --color-gray-600: #48484a;
    --color-gray-700: #424245;
    --color-gray-900: #1d1d1f;
    --color-black: #05080f;
    --color-blue: #2997ff;
    --color-blue-hover: #3ba0ff;
    --color-blue-dark: #0071e3;
    --color-purple: #bf5af2;
    --color-green: #30d158;
    --color-orange: #ff9f0a;
    --color-pink: #ff375f;
    --color-teal: #5ac8fa;
    --color-yellow: #ffd60a;
    --color-red: #ff453a;

    /* ── Alpha palette — white ───────────────── */
    --color-white-a2:  rgba(255, 255, 255, 0.02);
    --color-white-a3:  rgba(255, 255, 255, 0.03);
    --color-white-a4:  rgba(255, 255, 255, 0.04);
    --color-white-a6:  rgba(255, 255, 255, 0.06);
    --color-white-a8:  rgba(255, 255, 255, 0.08);
    --color-white-a10: rgba(255, 255, 255, 0.10);
    --color-white-a12: rgba(255, 255, 255, 0.12);
    --color-white-a15: rgba(255, 255, 255, 0.15);
    --color-white-a20: rgba(255, 255, 255, 0.20);
    --color-white-a25: rgba(255, 255, 255, 0.25);

    /* ── Alpha palette — black ───────────────── */
    --color-black-a10: rgba(0, 0, 0, 0.10);
    --color-black-a40: rgba(0, 0, 0, 0.40);
    --color-black-a80: rgba(5, 8, 15, 0.88);

    /* ── Alpha palette — blue ────────────────── */
    --color-blue-a6:  rgba(41, 151, 255, 0.06);
    --color-blue-a8:  rgba(41, 151, 255, 0.08);
    --color-blue-a10: rgba(41, 151, 255, 0.10);
    --color-blue-a12: rgba(41, 151, 255, 0.12);
    --color-blue-a15: rgba(41, 151, 255, 0.15);
    --color-blue-a20: rgba(41, 151, 255, 0.20);
    --color-blue-a25: rgba(41, 151, 255, 0.25);
    --color-blue-a30: rgba(41, 151, 255, 0.30);
    --color-blue-a40: rgba(41, 151, 255, 0.40);

    /* ── Alpha palette — green ───────────────── */
    --color-green-a4:  rgba(48, 209, 88, 0.04);
    --color-green-a10: rgba(48, 209, 88, 0.10);
    --color-green-a12: rgba(48, 209, 88, 0.12);
    --color-green-a15: rgba(48, 209, 88, 0.15);
    --color-green-a20: rgba(48, 209, 88, 0.20);
    --color-green-a30: rgba(48, 209, 88, 0.30);

    /* ── Alpha palette — yellow ──────────────── */
    --color-yellow-a8:  rgba(255, 214, 10, 0.08);
    --color-yellow-a12: rgba(255, 214, 10, 0.12);
    --color-yellow-a15: rgba(255, 214, 10, 0.15);
    --color-yellow-a40: rgba(255, 214, 10, 0.40);

    /* ── Alpha palette — orange ──────────────── */
    --color-orange-a4:  rgba(255, 159, 10, 0.04);
    --color-orange-a8:  rgba(255, 159, 10, 0.08);
    --color-orange-a10: rgba(255, 159, 10, 0.10);
    --color-orange-a12: rgba(255, 159, 10, 0.12);
    --color-orange-a15: rgba(255, 159, 10, 0.15);
    --color-orange-a30: rgba(255, 159, 10, 0.30);

    /* ── Alpha palette — red ─────────────────── */
    --color-red-a6:  rgba(255, 69, 58, 0.06);
    --color-red-a8:  rgba(255, 69, 58, 0.08);
    --color-red-a10: rgba(255, 69, 58, 0.10);
    --color-red-a12: rgba(255, 69, 58, 0.12);
    --color-red-a15: rgba(255, 69, 58, 0.15);
    --color-red-a30: rgba(255, 69, 58, 0.30);

    /* ── Alpha palette — purple ──────────────── */
    --color-purple-a10: rgba(191, 90, 242, 0.10);
    --color-purple-a12: rgba(191, 90, 242, 0.12);
    --color-purple-a15: rgba(191, 90, 242, 0.15);

    /* ── Alpha palette — teal ────────────────── */
    --color-teal-a6:  rgba(90, 200, 250, 0.06);
    --color-teal-a10: rgba(90, 200, 250, 0.10);
    --color-teal-a12: rgba(90, 200, 250, 0.12);
    --color-teal-a15: rgba(90, 200, 250, 0.15);
    --color-teal-a20: rgba(90, 200, 250, 0.20);
    --color-teal-a25: rgba(90, 200, 250, 0.25);
    --color-teal-a30: rgba(90, 200, 250, 0.30);

    /* ── Alpha palette — pink ────────────────── */
    --color-pink-a10: rgba(255, 55, 95, 0.10);
    --color-pink-a12: rgba(255, 55, 95, 0.12);
    --color-pink-a15: rgba(255, 55, 95, 0.15);

    /* ── Fonts ───────────────────────────────── */
    --font-display: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: var(--font-display);
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ── Easings ─────────────────────────────── */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Layout ──────────────────────────────── */
    --nav-height: 48px;
    --border-radius-sm: 12px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-card-sm: 16px;
    --border-radius-card: 24px;
    --border-radius-card-lg: 28px;
    --border-radius-pill: 980px;

    /* ── Shadows & borders ───────────────────── */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.05);
    --shadow-card-lg: 0 12px 48px rgba(0, 0, 0, 0.06);
    --transition-card: 0.4s var(--ease-out-quart);
    --border-light: 1px solid rgba(0, 0, 0, 0.06);
    --border-dark: 1px solid rgba(255, 255, 255, 0.08);
    --border-dark-hover: 1px solid rgba(255, 255, 255, 0.12);
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */
.theme-light {
    --color-white: #1d1d1f;
    --color-gray-50: #1d1d1f;
    --color-gray-100: #424245;
    --color-gray-200: #424245;
    --color-gray-300: #636366;
    --color-gray-400: #6e6e73;
    --color-gray-500: #636366;
    --color-gray-600: #8e8e93;
    --color-gray-700: #aeaeb2;
    --color-gray-900: #f5f5f7;
    --color-black: #ffffff;

    /* Accent colors — WCAG AA on #fff */
    --color-blue: #0071e3;
    --color-blue-hover: #0077ed;
    --color-green: #248a3d;
    --color-orange: #b25000;
    --color-yellow: #8a6d00;
    --color-teal: #0077a3;
    --color-pink: #d30f45;
    --color-purple: #8944ab;
    --color-red: #d70015;

    --color-white-a2:  rgba(0, 0, 0, 0.02);
    --color-white-a3:  rgba(0, 0, 0, 0.03);
    --color-white-a4:  rgba(0, 0, 0, 0.04);
    --color-white-a6:  rgba(0, 0, 0, 0.06);
    --color-white-a8:  rgba(0, 0, 0, 0.08);
    --color-white-a10: rgba(0, 0, 0, 0.10);
    --color-white-a12: rgba(0, 0, 0, 0.12);
    --color-white-a15: rgba(0, 0, 0, 0.15);
    --color-white-a20: rgba(0, 0, 0, 0.20);
    --color-white-a25: rgba(0, 0, 0, 0.25);

    --color-black-a10: rgba(0, 0, 0, 0.04);
    --color-black-a40: rgba(0, 0, 0, 0.10);
    --color-black-a80: rgba(255, 255, 255, 0.90);

    --color-blue-a6:  rgba(0, 113, 227, 0.06);
    --color-blue-a8:  rgba(0, 113, 227, 0.08);
    --color-blue-a10: rgba(0, 113, 227, 0.10);
    --color-blue-a12: rgba(0, 113, 227, 0.12);
    --color-blue-a15: rgba(0, 113, 227, 0.15);
    --color-blue-a20: rgba(0, 113, 227, 0.20);
    --color-blue-a25: rgba(0, 113, 227, 0.25);
    --color-blue-a30: rgba(0, 113, 227, 0.30);
    --color-blue-a40: rgba(0, 113, 227, 0.40);

    --color-green-a4:  rgba(36, 138, 61, 0.04);
    --color-green-a10: rgba(36, 138, 61, 0.10);
    --color-green-a12: rgba(36, 138, 61, 0.12);
    --color-green-a15: rgba(36, 138, 61, 0.15);
    --color-green-a20: rgba(36, 138, 61, 0.20);
    --color-green-a30: rgba(36, 138, 61, 0.30);

    --color-orange-a4:  rgba(178, 80, 0, 0.04);
    --color-orange-a8:  rgba(178, 80, 0, 0.08);
    --color-orange-a10: rgba(178, 80, 0, 0.10);
    --color-orange-a12: rgba(178, 80, 0, 0.12);
    --color-orange-a15: rgba(178, 80, 0, 0.15);
    --color-orange-a30: rgba(178, 80, 0, 0.30);

    --color-yellow-a8:  rgba(138, 109, 0, 0.08);
    --color-yellow-a12: rgba(138, 109, 0, 0.12);
    --color-yellow-a15: rgba(138, 109, 0, 0.15);
    --color-yellow-a40: rgba(138, 109, 0, 0.40);

    --color-red-a6:  rgba(215, 0, 21, 0.06);
    --color-red-a8:  rgba(215, 0, 21, 0.08);
    --color-red-a10: rgba(215, 0, 21, 0.10);
    --color-red-a12: rgba(215, 0, 21, 0.12);
    --color-red-a15: rgba(215, 0, 21, 0.15);
    --color-red-a30: rgba(215, 0, 21, 0.30);

    --color-purple-a10: rgba(137, 68, 171, 0.10);
    --color-purple-a12: rgba(137, 68, 171, 0.12);
    --color-purple-a15: rgba(137, 68, 171, 0.15);

    --color-teal-a6:  rgba(0, 119, 163, 0.06);
    --color-teal-a10: rgba(0, 119, 163, 0.10);
    --color-teal-a12: rgba(0, 119, 163, 0.12);
    --color-teal-a15: rgba(0, 119, 163, 0.15);
    --color-teal-a20: rgba(0, 119, 163, 0.20);
    --color-teal-a25: rgba(0, 119, 163, 0.25);
    --color-teal-a30: rgba(0, 119, 163, 0.30);

    --color-pink-a12: rgba(211, 15, 69, 0.12);
}

.theme-light body {
    background: #ffffff;
    color: #1d1d1f;
}

.theme-light .nav {
    background: rgba(255, 255, 255, 0.90);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.theme-light body::before,
.theme-light body::after {
    display: none;
}

/* ============================================
   BODY BACKGROUNDS — Grid & Blobs
   ============================================ */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(#1a2235 1px, transparent 1px),
        linear-gradient(90deg, #1a2235 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridMove 10s linear infinite;
    opacity: 0.3;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 350px at 80% 10%, rgba(0, 255, 136, 0.05) 0%, transparent 65%),
        radial-gradient(circle 350px at 20% 90%, rgba(77, 159, 255, 0.04) 0%, transparent 65%);
}

/* ============================================
   KEYFRAMES
   ============================================ */
@keyframes gridMove {
    0%   { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

/* ============================================
   FULLSCREEN TOGGLE (shared across all pages)
   ============================================ */
.nav__fullscreen {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 1px solid var(--color-white-a10);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all 0.25s;
    padding: 0;
    flex-shrink: 0;
}

.nav__fullscreen:hover {
    color: var(--color-teal);
    border-color: var(--color-teal-a30);
    background: var(--color-teal-a10);
}

.nav__fullscreen__collapse { display: none; }
.is-fullscreen .nav__fullscreen__expand { display: none; }
.is-fullscreen .nav__fullscreen__collapse { display: block; }

@media (max-width: 768px) {
    .nav__fullscreen { display: none; }
}

/* ============================================
   THEME TOGGLE (shared across all pages)
   ============================================ */
.nav__theme-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 1px solid var(--color-white-a10);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.nav__theme-toggle:hover {
    color: var(--color-yellow);
    border-color: var(--color-yellow-a40);
    background: var(--color-yellow-a8);
}

/* Icon containers with animated transitions */
.nav__theme-icon--dark,
.nav__theme-icon--light {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
    position: absolute;
}

.nav__theme-icon--dark {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.nav__theme-icon--light {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.theme-light .nav__theme-icon--dark {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}
.theme-light .nav__theme-icon--light {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Click burst animation */
@keyframes theme-toggle-burst {
    0%   { box-shadow: 0 0 0 0 var(--color-yellow-a40); }
    50%  { box-shadow: 0 0 0 8px var(--color-yellow-a8); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.nav__theme-toggle.is-animating {
    animation: theme-toggle-burst 0.5s ease-out;
}

/* ============================================
   BACK TO TOP (shared across all pages)
   ============================================ */
.g-btt {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--color-white-a15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: all 0.3s;
    z-index: 50;
}

.g-btt.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.g-btt:hover {
    background: var(--color-teal-a30);
    border-color: var(--color-teal-a25);
    color: var(--color-teal);
}

@media (max-width: 768px) {
    .g-btt { bottom: 16px; right: 16px; width: 40px; height: 40px; }
}

@media print {
    .g-btt { display: none; }
}