/* VOID.SYS — design token contract. The single source of truth every component reads from.
   Themes/presets override these values — never edit components to re-skin. */
/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
    /* Color Palette — cool paper + ink + vermillion accent */
    --bg: #E6E3DB;         /* cool bone paper */
    --bg-deep: #D4D0C3;
    --surface: #EFECE3;
    --paper: #F6F3EB;
    --accent: #FF4717;     /* vermillion */
    --accent-2: #1A2BFF;   /* cobalt (secondary pop) */
    --acid: #DDFF3D;       /* acid pop */
    --ochre: #E0A12B;
    --olive: #4D5226;
    --black: #0B0C12;
    --ink: #0B0C12;
    --white: #F6F3EB;
    --true-white: #FFFFFF;
    --ink-muted: #686670;
    --ink-faint: #9B9AA1;
    --hairline: rgba(11,12,18,0.14);
    --hairline-strong: rgba(11,12,18,0.30);

    --danger: #E63A14;
    --success: #1F8A4C;
    --warning: #F2C432;
    --info: #1A2BFF;
    --gray: #CFCCC2;

    --font-display: 'Bricolage Grotesque', 'Inter Tight', sans-serif;
    --font-body: 'Geist', 'Helvetica Neue', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    --font-serif: 'Instrument Serif', 'Times New Roman', serif;

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 72px;
    --space-xl: 144px;

    /* Borders — keep the bold spec but cleaner */
    --border-thin: 1px solid var(--ink);
    --border-base: 2px solid var(--ink);
    --border-thick: 4px solid var(--ink);
    --border-dash: 2px dashed var(--ink);

    --radius-sharp: 0px;
    --radius-soft: 4px;
    --radius-pill: 9999px;
    --radius-circle: 50%;

    /* Shadows — hard offset shadows kept but refined */
    --shadow-lvl1: 4px 4px 0 0 var(--ink);
    --shadow-lvl2: 8px 8px 0 0 var(--ink);
    --shadow-lvl3: 14px 14px 0 0 var(--ink);
    --shadow-inset: inset 4px 4px 0 0 var(--ink);
    --shadow-accent: 4px 4px 0 0 var(--accent);

    /* Motion — mechanical. Transform & opacity only; never animate layout */
    --dur-instant: 0.1s;   /* hover feedback, presses */
    --dur-fast: 0.15s;     /* small reveals, toggles */
    --dur-base: 0.2s;      /* default */
    --dur-smooth: 0.25s;   /* panels, cards */
    --dur-slow: 0.4s;      /* drawers, modals */
    --dur-reveal: 0.9s;    /* scroll reveals, hero */
    --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-pop: cubic-bezier(0.2, 0.8, 0.3, 1);
    --ease-step: steps(2, end);

    /* Focus — keyboard ring (variants: §08·B) */
    --focus-ring: 3px solid var(--accent);
    --focus-offset: 3px;

    /* Z-layers — every global z-index maps to one rung */
    --z-dropdown: 100;
    --z-tooltip: 1000;
    --z-overlay: 9000;     /* drawer backdrops, floating viz tips */
    --z-drawer: 9001;
    --z-modal: 9500;
    --z-grain: 9998;       /* film grain rides above UI */
    --z-float: 9999;       /* global chart tooltip */
    --z-cursor: 99999;     /* halo — nothing above it */

    /* Breakpoints — normative stops. CSS can't var() a media query:
       every raw px in @media below must equal one of these. */
    --bp-mobile: 480px;
    --bp-phablet: 700px;
    --bp-tablet: 900px;
    --bp-desktop: 1180px;
}

/* Iconography — line weight for the 24×24 sprite icons (themes may override) */
:root { --icon-stroke: 1.25; }