/* ============================================================
   BackBox Labs — Design tokens
   The operator's telegraph: industrial precision, restrained
   color, monospace wayfinding, editorial typographic hierarchy.
   ============================================================ */

:root {
    /* ----- Surface palette (operator dark) ----- */
    --bg:           #06080d;
    --bg-elev:      #0b0f17;
    --surface:      #10151f;
    --surface-2:    #161d2a;
    --surface-3:    #1d2636;

    /* ----- Lines ----- */
    --line:         #1c2535;
    --line-soft:    #131a26;
    --line-strong:  #2a374e;

    /* ----- Text ----- */
    --text:         #e6ecf3;
    --text-dim:     #9aa6b6;
    --text-mute:    #5d6878;
    --text-quiet:   #38424f;

    /* ----- Accents (azure signature, single hue) ----- */
    --accent:       #3d8bff;        /* the BackBox blue */
    --accent-hi:    #66a4ff;        /* hover state */
    --accent-deep:  #1a6bf0;        /* pressed / saturated */
    --accent-cyan:  #7fa8ff;        /* secondary azure tone, no green tint */
    --accent-soft:  rgba(61, 139, 255, 0.18);
    --accent-glow:  rgba(61, 139, 255, 0.28);
    --accent-trace: rgba(61, 139, 255, 0.06);

    /* ----- Mode card tonals (categorical, not decorative) ----- */
    --mode-blue:    #3d8bff;
    --mode-red:     #ff5d6c;
    --mode-violet:  #b48cff;

    /* ----- Aliases consumed by blog.css ----- */
    --color-background:        var(--bg);
    --color-surface:           var(--surface);
    --color-surface-lighten-1: var(--surface-2);
    --color-surface-lighten-2: var(--surface-3);
    --color-primary:           var(--accent);
    --color-secondary:         var(--accent-cyan);
    --color-accent:            var(--accent);
    --color-text:              var(--text);
    --color-text-darken:       var(--text-dim);
    --color-text-muted:        var(--text-mute);
    --color-border:            var(--line);

    /* ----- Type ----- */
    --font-display: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    --fs-xs:   0.75rem;     /* 12px — meta, mono index */
    --fs-sm:   0.8125rem;   /* 13px — captions */
    --fs-md:   1rem;        /* 16px — body */
    --fs-lg:   1.125rem;    /* 18px — lede */
    --fs-xl:   1.375rem;    /* 22px — minor headings */
    --fs-2xl:  clamp(1.65rem, 2.4vw, 2.125rem);   /* h3 */
    --fs-3xl:  clamp(2rem, 3.6vw, 2.875rem);      /* h2 */
    --fs-4xl:  clamp(2.5rem, 5.6vw, 4.6rem);      /* page h1 */
    --fs-5xl:  clamp(3.25rem, 8.5vw, 6.75rem);    /* hero display */

    --lh-tight:  1.05;
    --lh-snug:   1.2;
    --lh-base:   1.55;
    --lh-loose:  1.75;

    --tracking-tight:   -0.022em;
    --tracking-display: -0.04em;
    --tracking-mono:    0.04em;
    --tracking-eyebrow: 0.18em;

    /* ----- Space (8-pt rooted, non-linear) ----- */
    --sp-2xs:  0.25rem;
    --sp-xs:   0.5rem;
    --sp-sm:   1rem;
    --sp-md:   1.5rem;
    --sp-lg:   2.25rem;
    --sp-xl:   3.5rem;
    --sp-2xl:  5.5rem;
    --sp-3xl:  8.5rem;

    --section-y: clamp(3.5rem, 7vw, 7rem);

    /* ----- Geometry ----- */
    --radius-xs:  2px;
    --radius-sm:  4px;
    --radius-md:  6px;
    --radius-lg:  10px;

    --hairline:    1px solid var(--line);
    --hairline-sm: 1px solid var(--line-soft);

    /* ----- Motion ----- */
    --ease:        cubic-bezier(.2, .7, .2, 1);
    --ease-snap:   cubic-bezier(.4, 0, .2, 1);
    --t-fast:      150ms var(--ease);
    --t-base:      280ms var(--ease);
    --t-slow:      520ms var(--ease);

    /* ----- Layout ----- */
    --container:        1480px;
    --container-narrow: 1080px;  /* readable text columns: blog, article */
    --container-wide:   1640px;
    --gutter:           clamp(1.25rem, 3.2vw, 2.5rem);
    --nav-h:            68px;

    /* ----- Z-index ladder ----- */
    --z-base:    0;
    --z-content: 1;
    --z-nav:     50;
    --z-overlay: 80;
    --z-modal:   100;
}


/* ============================================================
   Reset & base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
}

/* Single subtle ambient gradient — anchors the whole page */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(80% 60% at 80% -10%,  var(--accent-trace), transparent 65%),
        radial-gradient(70% 50% at -10% 100%, rgba(127, 168, 255, 0.04), transparent 65%);
}

main, nav, header, footer, section { position: relative; z-index: var(--z-content); }

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover { color: var(--accent-hi); }

/* Focus rings — visible on keyboard, suppressed on mouse */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--accent); color: var(--bg); }

::-webkit-scrollbar         { width: 12px; height: 12px; }
::-webkit-scrollbar-track   { background: var(--bg); }
::-webkit-scrollbar-thumb   { background: var(--surface-2); border: 3px solid var(--bg); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--surface-3); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   Keyframes (used across components)
   ============================================================ */

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@keyframes reveal-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
    50%      { box-shadow: 0 0 0 10px transparent; }
}

@keyframes scan-sweep {
    0%   { transform: translateX(-100%); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}