/* base.css — Quantblocks Design System
 * Editorial Trading Terminal aesthetic
 * Pure CSS, no build tools. */

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    scroll-behavior: smooth;
    font-feature-settings: "ss01", "cv11", "kern";
    text-rendering: optimizeLegibility;
    /* Cover rubber-band overscroll and notch area with the same background */
    background-color: var(--color-surface);
}
html { height: 100%; }
body {
    display: flex;
    flex-direction: column;
    line-height: inherit;
    font-variant-ligatures: common-ligatures contextual;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    /* Use dvh on modern browsers to account for iOS bottom bar collapse */
    min-height: 100dvh;
    position: relative;
    /* `clip` instead of `hidden`: visually identical for preventing
       horizontal overflow, but does NOT promote body to a scroll
       container. iOS Safari treats `overflow-x: hidden` on body as a
       scroll container, which detaches `position: fixed` from the
       viewport — fixed nav then scrolls with content and exposes the
       safe-area band next to the Dynamic Island. Safari ≥16 supports
       `clip`. */
    overflow-x: clip;
}

/* Ensures the main content area takes the remaining vertical space so
   the footer sticks to the bottom of the viewport on short pages. */
body > main { flex: 1 1 auto; }

/* ===== iOS safe-area — notch / dynamic island handling =====
 * The sticky nav must extend its background INTO the notch so the
 * frosted-glass effect covers the whole top edge. Without this, scrolled
 * content would be visible in the status bar area above the nav.
 *
 * padding-top is applied to the <nav> itself (not the inner row) so the
 * nav's background color/blur fills the added space. */
nav.sticky {
    padding-top: env(safe-area-inset-top, 0);
}
/* Helper for any fixed bottom bar (editor bottom_bar, cookie banner) */
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: inherit; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* Numbers tabular everywhere mono is used — terminal feel */
code, kbd, samp, pre, .font-mono { font-variant-numeric: tabular-nums slashed-zero; }

/* ===== Custom Properties — Editorial Trading Terminal ===== */
:root {
    /* Fonts */
    --font-display: 'Fraunces', ui-serif, Georgia, serif;
    --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Surfaces — deeper, more nuanced */
    --color-surface:         #050507;
    --color-surface-light:   #0c0c10;
    --color-surface-lighter: #17171c;
    --color-surface-elev:    #1f1f25;
    --color-hairline:        rgba(255, 255, 255, 0.06);
    --color-hairline-strong: rgba(255, 255, 255, 0.10);

    /* Text */
    --color-text:        #e7e7ea;
    --color-text-dim:    #a1a1aa;
    --color-text-faint:  #71717a;
    --color-text-ghost:  #52525b;

    /* Brand — refined teal */
    --color-primary:       #14b8a6;
    --color-primary-dark:  #0f8f82;
    --color-primary-light: #5eead4;
    --color-primary-glow:  rgba(20, 184, 166, 0.35);

    /* Secondary accent — amber (P&L highlights, CTAs accent) */
    --color-amber:       #f59e0b;
    --color-amber-light: #fbbf24;

    /* Tertiary */
    --color-accent:  #22d3ee;

    /* Status */
    --color-success: #10b981;
    --color-warning: #eab308;
    --color-danger:  #f43f5e;

    /* Gradient stops (Tailwind-compat) */
    --tw-gradient-from: transparent;
    --tw-gradient-to: transparent;
    --tw-gradient-via: transparent;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ===== Global atmosphere: film grain overlay ===== */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    mix-blend-mode: overlay;
    opacity: 0.055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient glow behind content — extremely subtle */
body::after {
    content: "";
    position: fixed;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    height: 60vh;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.06) 0%, transparent 60%);
    filter: blur(60px);
}

/* ===== Global typographic polish ===== */
::selection { background-color: rgba(20, 184, 166, 0.35); color: #fff; }
::-moz-selection { background-color: rgba(20, 184, 166, 0.35); color: #fff; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fafafa;
}

/* H1 gets the editorial serif for magazine feel. Optical size scales with weight. */
h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

/* ===== iOS Safari fixes ===== */

/* Solid backgrounds all the way down — prevents any bleed through the
   status-bar area or during rubber-band overscroll. */
html, body { background-color: var(--color-surface); }

/* Block vertical rubber-band at the page edges (iOS Safari, Chrome
   mobile). Doesn't affect inner scrollable regions like the editor. */
html { overscroll-behavior-y: none; }

/* Navbar is now in the normal document flow (position: relative) — same
   pattern Stripe, Linear, Vercel, GitHub use on mobile. Reason: iOS 26
   Safari has documented bugs where `position: fixed` elements fail to
   repaint the safe-area band during scroll (Bug A in WebKit Bugzilla
   #297779, Apple Discussions 256138682, plus the new Liquid Glass
   toolbar tinting sampling). Even Apple's own apple.com uses
   position: absolute, not fixed, for the same reason.
   With an in-flow navbar, the safe-area band is always filled — by the
   navbar's bg at scroll-top, by the page bg further down — and the
   render bug never fires. */
.site-navbar {
    background: transparent;
    isolation: isolate;
}
.site-navbar-bg {
    position: absolute;
    inset: 0;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-hairline);
    pointer-events: none;
    z-index: 0;
}
.site-navbar-content {
    position: relative;
    z-index: 1;
    padding-top: env(safe-area-inset-top, 0px);
}