/**
 * Design tokens — single source of truth.
 * Palette matches the "theme-grey" dark design: near-black grey surfaces,
 * one orange accent, three-font system (display / body / mono-label).
 * Custom properties can't be read inside @media conditions in plain CSS,
 * so breakpoints (560px / 820px / 900px / 960px) are literal values in
 * base.css/block stylesheets rather than tokenized here.
 */
:root {
    /* ---- Surfaces ---- */
    --bg: #15161A;
    --panel: #1D1F24;
    --panel-2: #282B30;

    /* ---- Text ---- */
    --ink: #EEEFF1;
    --mut: #9C9FA6;
    --mut-2: #74777E;

    /* ---- Accent ---- */
    --accent: #FF520E;
    --accent-2: #FFB899;
    --accent-soft: #FF8A5C;

    /* ---- Lines ---- */
    --line: rgba(255, 255, 255, .085);
    --line-2: rgba(255, 255, 255, .15);

    /* ---- Semantic aliases (so base.css never names a raw color) ---- */
    --color-text: var(--ink);
    --color-heading: var(--ink);
    --color-muted: var(--mut);
    --color-subtle: var(--mut-2);
    --color-border: var(--line);
    --color-border-strong: var(--line-2);
    --color-surface: var(--bg);
    --color-surface-alt: var(--panel);
    --color-primary: var(--accent);
    --color-primary-hover: var(--accent-soft);
    --color-link: var(--accent-soft);
    --color-link-hover: var(--accent);
    --color-focus-ring: var(--accent);

    /* ---- Fonts ---- */
    --font-heading: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Instrument Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* ---- Font sizes ---- */
    --fs-100: 0.75rem;
    --fs-200: 0.875rem;
    --fs-300: 1rem;
    --fs-400: 1.05rem;
    --fs-500: 1.25rem;
    --fs-600: 1.5rem;
    --fs-700: 1.875rem;
    --fs-800: clamp(1.9rem, 4vw, 3rem);
    --fs-900: clamp(2.6rem, 6.4vw, 5.4rem);

    /* ---- Font weights ---- */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ---- Line heights ---- */
    --lh-tight: 1.04;
    --lh-normal: 1.6;
    --lh-loose: 1.7;

    /* ---- Mono label styling (the ubiquitous eyebrow/tag treatment) ---- */
    --mono-tracking-tight: .06em;
    --mono-tracking: .12em;
    --mono-tracking-wide: .22em;

    /* ---- Spacing scale ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: clamp(2.5rem, 5vw, 4rem);
    --space-9: clamp(5.25rem, 9vw, 8.25rem);

    /* ---- Radius ---- */
    --radius-sm: 3px;
    --radius-md: 8px;
    --radius-lg: 18px;
    --radius-full: 999px;

    /* ---- Motion ---- */
    --ease-standard: cubic-bezier(.22, .61, .36, 1);
    --transition-fast: 150ms;
    --transition-base: 280ms;

    /* ---- Layout ---- */
    --container-max: 1180px;
    --container-max-narrow: 720px;
    --container-padding: 28px;
}