/* KM CIPHER theme tokens. Colors are RGB channels so Tailwind opacity modifiers (/40) keep working. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── Dark (default) — also re-applied inside [data-theme="dark"] islands on light pages ── */
:root,
html.light [data-theme="dark"] {
    color-scheme: dark;
    --c-bg: 5 7 13;
    --c-surface: 10 15 28;
    --c-surface-2: 10 15 28;
    --c-ink: 230 241 255;
    --c-osv: 0 245 255;       --a-osv: 0.62;
    --ta-ink: 0.62; --ta-osv: 0.55; --ta-muted: 0.6;
    --c-outline: 0 245 255;   --a-outline: 0.2;
    --c-outline-v: 0 245 255; --a-outline-v: 0.1;
    --c-primary: 0 245 255;
    --c-accent: 0 255 255;
    --c-accent-2: 123 97 255;
    --c-accent-3: 0 255 159;
    --c-gold: 233 195 73;
    --c-gold-2: 255 224 136;
    --c-muted: 191 197 228;
    --c-on-accent: 5 7 13;
    --c-deep: 10 17 40;
    --c-side: 19 19 19;
    --c-shade: 0 0 0;

    /* legacy vars used by per-page <style> blocks */
    --bg-cyber: rgb(var(--c-bg));
    --surface-cyber: rgb(var(--c-surface));
    --accent-cyan: rgb(var(--c-primary));
    --accent-purple: rgb(var(--c-accent-2));
    --accent-green: rgb(var(--c-accent-3));
    --neon-border: rgb(var(--c-primary) / 0.2);
}

/* ── Light: "Clean Lab" ── */
html.light {
    color-scheme: light;
    --c-bg: 244 246 251;
    --c-surface: 255 255 255;
    --c-surface-2: 238 241 248;
    --c-ink: 15 23 42;
    --c-osv: 71 85 105;       --a-osv: 1;
    --ta-ink: 0.8; --ta-osv: 0.92; --ta-muted: 0.88;
    --c-outline: 100 116 139; --a-outline: 0.35;
    --c-outline-v: 148 163 184; --a-outline-v: 0.3;
    --c-primary: 14 116 144;
    --c-accent: 14 116 144;
    --c-accent-2: 107 79 232;
    --c-accent-3: 4 120 87;
    --c-gold: 161 98 7;
    --c-gold-2: 202 138 4;
    --c-muted: 91 101 122;
    --c-on-accent: 255 255 255;
    --c-deep: 226 232 240;
    --c-side: 255 255 255;
    --c-shade: 100 116 139;

    --bg-cyber: rgb(var(--c-bg));
    --surface-cyber: rgb(var(--c-surface));
    --accent-cyan: rgb(var(--c-primary));
    --accent-purple: rgb(var(--c-accent-2));
    --accent-green: rgb(var(--c-accent-3));
    --neon-border: rgb(var(--c-outline-v) / 0.6);
}

/* Tokens with a built-in alpha: bare class keeps the old look, /NN modifiers still override */
html .text-on-surface-variant, html .hover\:text-on-surface-variant:hover { color: rgb(var(--c-osv) / var(--a-osv)); }
html .text-outline   { color: rgb(var(--c-outline) / 0.55); }
html.light .text-outline { color: rgb(var(--c-muted)); }
html .border-outline { border-color: rgb(var(--c-outline) / var(--a-outline)); }
html .bg-outline     { background-color: rgb(var(--c-outline) / var(--a-outline)); }

/* Dark islands keep dark text colors */
html.light [data-theme="dark"] { color: rgb(var(--c-ink)); }

/* Toggle transition: only while switching, never on load */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, fill .2s ease !important;
}

/* ── Light-mode component overrides ─────────────────────────────────── */
html.light body { background-color: rgb(var(--c-bg)); }

/* ── Card depth: layered elevation (ambient + key light) and a top-edge highlight ── */
html .glass-panel, html .bento-card, html .blog-card {
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.07),
        0 1px 0 rgb(0 0 0 / 0.5),
        0 10px 20px -8px rgb(0 0 0 / 0.7),
        0 28px 56px -20px rgb(0 0 0 / 0.85) !important;
}
html .glass-panel:hover, html .bento-card:hover, html .blog-card:hover {
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.1),
        0 1px 0 rgb(0 0 0 / 0.5),
        0 16px 28px -10px rgb(0 0 0 / 0.8),
        0 36px 72px -24px rgb(0 0 0 / 0.9),
        0 0 28px rgb(var(--c-primary) / 0.14) !important;
}

html.light .glass-panel,
html.light .bento-card,
html.light .blog-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 100%) !important;
    border-color: rgb(var(--c-outline-v) / 0.5) !important;
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        0 1px 2px rgb(15 23 42 / 0.06),
        0 4px 10px -2px rgb(15 23 42 / 0.05),
        0 20px 40px -14px rgb(15 23 42 / 0.16) !important;
}
html.light .glass-panel:hover,
html.light .bento-card:hover,
html.light .blog-card:hover {
    border-color: rgb(var(--c-primary) / 0.4) !important;
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        0 2px 4px rgb(15 23 42 / 0.06),
        0 10px 20px -6px rgb(15 23 42 / 0.08),
        0 32px 56px -18px rgb(var(--c-primary) / 0.28) !important;
}
html.light .glass-panel::after, html.light .bento-card::after { opacity: 0; }

html.light [data-theme="dark"] .glass-panel,
html.light [data-theme="dark"] .bento-card,
html.light [data-theme="dark"] .blog-card {
    background: rgba(10, 15, 28, 0.7) !important;
    border-color: rgba(0, 245, 255, 0.2) !important;
}

/* Interactive tilt (assets/js/card-depth.js): pointer spotlight that follows the cursor */
.depth-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--c-primary) / 0.14), transparent 45%);
}
html.light .depth-glare {
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--c-primary) / 0.09), rgb(255 255 255 / 0) 45%);
}
.is-tilting > .depth-glare { opacity: 1; }
.is-tilting { will-change: transform; }

/* ── Typography: crisper rendering and readable weights ── */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}
/* :where() keeps specificity at 0 so explicit font-* utilities still win */
:where(html.light) body { font-weight: 500; }
:where(html) :where(.text-\[9px\], .text-\[10px\], .text-\[11px\]) { font-weight: 600; }
:where(html) :where(.text-xs, .text-sm, p) { font-weight: 500; }
:where(html) :where(.font-mono, code) { font-feature-settings: "calt" 1, "zero" 1; }

/* Buttons: soft tinted lift instead of neon glow */
html.light button:hover, html.light .cyber-btn:hover, html.light .neon-glow-btn:hover, html.light a[class*="btn"]:hover {
    box-shadow: 0 6px 18px rgb(var(--c-primary) / 0.18) !important;
    background-color: rgb(var(--c-primary) / 0.08) !important;
}
html.light .cyber-btn { background: rgb(var(--c-primary) / 0.06); box-shadow: none; }
html.light .neon-glow-btn::before { background: linear-gradient(45deg, transparent, rgb(255 255 255 / 0.45), transparent); }

/* Standard Tailwind palette: *-400 text is too faint on white */
/* (0,2,1) specificity: beats .text-white, loses to Tailwind group-hover:/hover: color changes.
   :where(:not(island *)) adds no specificity and leaves dark islands on their dark palette. */
html.light .text-white:where(:not([data-theme="dark"] *)) { color: rgb(var(--c-ink)); }
html.light .text-white:is(.bg-accent-2, .bg-red-500, .bg-red-600) { color: #fff; }
html.light .hover\:text-white:hover:where(:not([data-theme="dark"] *)) { color: rgb(var(--c-ink)); }
html.light .group:hover .group-hover\:text-white:where(:not([data-theme="dark"] *)) { color: rgb(var(--c-ink)); }
html.light .text-red-300:where(:not([data-theme="dark"] *)), html.light .hover\:text-red-300:hover:where(:not([data-theme="dark"] *)) { color: #b91c1c; }
html.light .text-red-400:where(:not([data-theme="dark"] *)), html.light .text-red-500:where(:not([data-theme="dark"] *)),
html.light .group:hover .group-hover\:text-red-400:where(:not([data-theme="dark"] *)) { color: #b91c1c; }
html.light .text-orange-400:where(:not([data-theme="dark"] *)), html.light .text-orange-500:where(:not([data-theme="dark"] *)),
html.light .group:hover .group-hover\:text-orange-400:where(:not([data-theme="dark"] *)) { color: #c2410c; }
html.light .text-yellow-400:where(:not([data-theme="dark"] *)), html.light .text-amber-400:where(:not([data-theme="dark"] *)) { color: #a16207; }
html.light .text-green-400:where(:not([data-theme="dark"] *)), html.light .text-emerald-400:where(:not([data-theme="dark"] *)),
html.light .group:hover .group-hover\:text-emerald-400:where(:not([data-theme="dark"] *)) { color: #047857; }
html.light .text-blue-400:where(:not([data-theme="dark"] *)) { color: #2563eb; }
html.light .text-purple-400:where(:not([data-theme="dark"] *)), html.light .text-purple-500:where(:not([data-theme="dark"] *)) { color: #7c3aed; }
html.light .text-pink-400:where(:not([data-theme="dark"] *)) { color: #db2777; }
html.light .text-gray-400:where(:not([data-theme="dark"] *)) { color: #64748b; }

/* Logo artwork has a baked-in black background: present it as a dark badge */
html.light img[src*="km_cipher_logo"] {
    background: #05070D;
    border-radius: 8px;
    padding: 2px;
    filter: drop-shadow(0 2px 6px rgb(15 23 42 / 0.2)) !important;
}

html.light .cyber-cursor {
    mix-blend-mode: multiply;
    background: radial-gradient(circle, rgb(var(--c-primary) / 0.18) 0%, transparent 65%);
}
html.light #scroll-progress { box-shadow: none; }
html.light .timeline-line::before { background: linear-gradient(to bottom, rgb(var(--c-gold)) 0%, rgb(var(--c-gold) / 0) 100%); }
html.light .gradient-text { background-image: linear-gradient(135deg, rgb(var(--c-primary)), rgb(var(--c-accent-2)), rgb(var(--c-accent-3))); }

html.light ::selection { background: rgb(var(--c-primary) / 0.2); color: rgb(var(--c-ink)); }
html.light ::-webkit-scrollbar-track { background: rgb(var(--c-surface-2)); }
html.light ::-webkit-scrollbar-thumb { background: rgb(var(--c-outline) / 0.45); border-radius: 10px; }

:focus-visible { outline: 2px solid rgb(var(--c-primary)); outline-offset: 2px; }

/* ── Theme toggle (escapes the global button glow/scale rules) ── */
html .theme-toggle,
html .theme-toggle:hover {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 1px solid rgb(var(--c-outline) / 0.6) !important;
    background: rgb(var(--c-surface) / 0.6) !important;
    color: rgb(var(--c-primary));
    transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
}
html .theme-toggle:hover { border-color: rgb(var(--c-primary)) !important; }
html .theme-toggle .material-symbols-outlined { font-size: 20px; transition: transform .35s ease, opacity .2s ease; }
html .theme-toggle:active .material-symbols-outlined { transform: rotate(45deg) scale(.85); }

/* ── Mobile layout guards ──
   <main> uses mx-auto, which turns off flex stretching and lets it grow to its widest child;
   w-full + md:ml-20 on the footer made it 100% + 80px wide on tablets. */
body > main { width: 100%; min-width: 0; }
@media (min-width: 768px) {
    body > main[class*="md:ml-20"] { width: calc(100% - 5rem); }
    body > footer[class*="md:ml-20"] { width: auto; }
}
/* AOS fade-left/right cards start 100px off-screen until animated; never let that scroll the page */
html, body { overflow-x: clip; }

/* Filled buttons keep their fill on hover: the pages' global `button:hover` rule swaps it for a
   10% tint, which left the dark label on a near-transparent background (text vanished). */
html body :is(button, a)[class]:is(.bg-tertiary, .bg-primary, .bg-accent-cyan):hover { background-color: rgb(var(--c-primary)) !important; filter: brightness(1.1); }
html body :is(button, a)[class].bg-accent:hover { background-color: rgb(var(--c-accent)) !important; filter: brightness(1.1); }
html body :is(button, a)[class].bg-gold:hover { background-color: rgb(var(--c-gold)) !important; filter: brightness(1.1); }