/* ============================================================
   QIS · base tokens, reset, typography
   ============================================================ */

:root {
    /* Brand */
    --navy:        #00274C;
    --navy-deep:   #001a36;
    --maize:       #FFCB05;
    --maize-soft:  #ffd94a;

    /* Neutrals — deep blue-charcoal, lifted off pure black */
    --paper:       #0c0e14;   /* page base */
    --paper-alt:   #11141c;   /* alternating section band */
    --ink:         #e8ecf2;   /* primary text */
    --ink-dim:     #b4bcc9;   /* secondary */
    --ink-faint:   #6b7280;   /* tertiary / labels */
    --surface:     #14171f;
    --surface-2:   #1a1e28;
    --surface-3:   #222734;

    /* Soft depth glow tint (navy), painted faintly behind the page */
    --glow:        rgba(40, 95, 200, 0.10);

    /* Tint — base channel for subtle overlays/lines; flips per theme */
    --tint-rgb:    255, 255, 255;

    /* Deep chrome surfaces (ticker bar, footer, glassy header, mobile nav) */
    --bar-bg:           #070910;
    --footer-bg:        #090b12;
    --header-scroll-bg: rgba(7, 8, 11, 0.78);
    --nav-mobile-bg:    rgba(14, 16, 22, 0.96);

    /* Filters that must invert per theme */
    --map-filter:        invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.95) saturate(0.9);
    --logo-filter:       grayscale(1) brightness(0) invert(0.78) contrast(0.95);
    --logo-filter-hover: grayscale(0) brightness(0) invert(1);
    --wordmark-shadow:   rgba(0,0,0,0.45);

    /* Lines */
    --hair:        rgba(var(--tint-rgb), 0.08);
    --hair-strong: rgba(var(--tint-rgb), 0.18);

    /* Data accents (use sparingly, data only) */
    --bull:        #4ade80;   /* terminal green */
    --bear:        #f87171;   /* risk red */
    --signal:      #60a5fa;   /* research blue */

    /* Emphasis text accent — readable per theme */
    --accent-ink:  var(--maize);

    /* Motion */
    --ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in:     cubic-bezier(0.6, 0, 0.8, 0.2);

    /* Shadow */
    --shadow-sm:   0 1px 0 rgba(var(--tint-rgb),0.04) inset, 0 2px 8px rgba(0,0,0,0.25);
    --shadow-md:   0 1px 0 rgba(var(--tint-rgb),0.04) inset, 0 10px 30px rgba(0,0,0,0.35);

    /* Radii */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;

    /* Layout */
    --container:   1240px;
    --gutter:      28px;

    /* Fonts */
    --f-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --f-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --f-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* ============================================================
   Reset
   ============================================================ */

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        radial-gradient(ellipse 90% 60% at 50% -10%, var(--glow), transparent 70%),
        radial-gradient(ellipse 70% 50% at 100% 100%, var(--glow), transparent 65%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: "ss01", "cv11";
}

/* Alternating tonal band to break up the page */
.section--alt {
    background: var(--paper-alt);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}

img, svg { max-width: 100%; display: block; }

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s var(--ease);
}

button { font: inherit; }

/* Editorial heads — serif for h2s, sans stays on small heads */
h1, h2, h3, h4 {
    margin: 0 0 .35em;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.08;
    font-weight: 500;
}

h1 {
    font-family: var(--f-serif);
    font-size: clamp(2.6rem, 6.4vw, 5rem);
    font-weight: 400;
    letter-spacing: -0.035em;
}

h2 {
    font-family: var(--f-serif);
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 400;
    letter-spacing: -0.028em;
}

h3 {
    font-family: var(--f-sans);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

p {
    margin: 0 0 1em;
    color: var(--ink-dim);
}

/* Monospace utility — used everywhere for data/labels/codes */
.mono {
    font-family: var(--f-mono);
    font-feature-settings: "tnum", "zero";
}

/* Tiny all-caps section label (the "terminal" label) */
.kicker {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.kicker::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--maize);
    border-radius: 1px;
    display: inline-block;
}

.kicker--plain::before { display: none; }

/* Layout */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.hairline {
    height: 1px;
    background: var(--hair);
    border: 0;
    margin: 0;
}

.section {
    padding: 96px 0;
    position: relative;
}

@media (max-width: 960px) {
    .section { padding: 64px 0; }
}

/* Selection */
::selection { background: var(--maize); color: var(--navy); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    html { scroll-behavior: auto; }
}