/* ==========================================================================
   theme.css — all design tokens. Edit this file to re-theme the whole site.

   CSS structure (load in this order):
     theme.css           tokens only (this file)
     base.css            reset, page layout, typography, utilities
     components/*.css    reusable building blocks (panel, button, footer, …)
     features/*.css      one file per page section / feature

   Breakpoints (media queries can't read variables — keep these in sync):
     850px   header switches to a grid layout
     730px   mobile: stacked layout, tighter spacing (token overrides below)
     420px   small phones
   ========================================================================== */

/* ── Fonts (self-hosted in /fonts/) ── */
@font-face {
    font-family: "Exo 2";
    src: url("../fonts/exo-2-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Share Tech Mono";
    src: url("../fonts/share-tech-mono-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Colors: backgrounds ── */
    --bg-dark: #030a0c;
    --bg-lighter: #07141b;
    --glass-bg: rgba(5, 16, 20, 0.75);          /* panels */
    --glass-bg-strong: rgba(5, 16, 20, 0.85);   /* round icon buttons */
    --overlay-bg: rgba(2, 8, 10, 0.88);         /* lightbox backdrop */
    --shade-bg: rgba(0, 0, 0, 0.2);             /* sunken cards */

    /* ── Colors: accent ──
       Change --accent-rgb and every accent tint, glow and border follows. */
    --accent-rgb: 0, 240, 255;
    --accent: rgb(var(--accent-rgb));
    --accent-dim: rgba(var(--accent-rgb), 0.02);        /* hairline borders */
    --accent-dim-text: rgba(var(--accent-rgb), 0.1);    /* separators, badges */
    --accent-tint-1: rgba(var(--accent-rgb), 0.03);     /* card backgrounds */
    --accent-tint-2: rgba(var(--accent-rgb), 0.05);     /* notices, placeholders */
    --accent-tint-3: rgba(var(--accent-rgb), 0.06);     /* hover backgrounds */
    --accent-border: rgba(var(--accent-rgb), 0.3);      /* hover borders */
    --accent-glow: rgba(var(--accent-rgb), 0.4);        /* glows & shadows */

    /* ── Colors: text ── */
    --text-main: #E0F7FA;
    --text-dim: rgba(224, 247, 250, 0.811);
    --text-on-accent: var(--bg-dark);           /* text on solid accent (hover states) */

    /* ── Colors: states ── */
    --warn-rgb: 255, 180, 0;                    /* template placeholders on legal pages */
    --warn: rgba(var(--warn-rgb), 0.9);
    --warn-dim: rgba(var(--warn-rgb), 0.15);
    --warn-border: rgba(var(--warn-rgb), 0.35);
    --disabled-border: rgba(255, 255, 255, 0.1);
    --disabled-text: rgba(255, 255, 255, 0.3);

    /* ── Colors: animations (read by JS) ── */
    --star-colors: var(--accent-rgb) / 180, 120, 255 / 255, 255, 200 / 0, 200, 180;  /* "r, g, b" list, "/"-separated */
    --nebula-colors: 0, 240, 255 / 0, 200, 180 / 180, 120, 255 / 70, 110, 255;
    --hypercube-inner-rgb: 0, 150, 175;         /* 404 tesseract; outer edges use --accent-rgb */

    /* ── Typography ── */
    --font-sans: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "Share Tech Mono", ui-monospace, "SF Mono", Consolas, monospace;

    --font-display: 2.8rem;     /* name in the header */
    --font-h1: 2.5rem;
    --font-h2: 2rem;
    --font-h3: 1.5rem;
    --font-h4: 1.2rem;
    --font-lead: 1.1rem;        /* tagline, small headings */
    --font-base: 1rem;
    --font-body-sm: 0.95rem;    /* card text */
    --font-label: 0.9rem;       /* mono labels */
    --font-small: 0.85rem;
    --font-xsmall: 0.8rem;      /* small buttons, badges */
    --font-tiny: 0.72rem;

    --line-height-base: 1.6;
    --line-height-tight: 1.15;
    --tracking-label: 0.12em;   /* letter-spacing of uppercase mono labels */

    /* ── Spacing scale ── */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3.5rem;
    --space-3xl: 4rem;

    /* ── Layout ── */
    --page-width: 1200px;
    --page-width-narrow: 900px;     /* legal pages */
    --page-margin-y: 4rem;          /* space above/below the page content */
    --page-gutter: 1.5rem;          /* left/right page padding */
    --panel-padding-y: 2.25rem;
    --panel-padding-x: 2.25rem;
    --panel-gap: 2rem;              /* space between panels */
    --card-padding: 1.5rem;

    /* ── Shape ── */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* ── Effects ── */
    --glass-blur: 6px;
    --shadow-panel: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    --text-glow: 0 0 12px var(--accent-glow);

    /* ── Motion ── */
    --duration-fast: 0.2s;
    --duration-base: 0.3s;
    --duration-slow: 0.4s;
    --ease-snappy: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ── Mobile token overrides ── */
@media (max-width: 730px) {
    :root {
        --font-h1: 1.9rem;
        --page-margin-y: 1.25rem;
        --page-gutter: 0.6rem;
        --panel-padding-y: 1.25rem;
        --panel-padding-x: 1rem;
    }
}