/* Hallmark · genre: modern-minimal · macrostructure: n/a (token export) · design-system: design.md · designed-as-app
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 *
 * Pixeliom design tokens. This file is the portable artifact — copy it to reuse
 * the system. Every colour and font in the project resolves through a name
 * declared here. No raw rgba() or #hex may appear outside this block.
 *
 * The twelve palette values are user-locked and byte-exact. Everything else is
 * derived from them with color-mix(in oklab, …) so tints stay perceptually even
 * without restating the brand in another colour space.
 */

:root {
    /* ========== Backgrounds — locked ========== */
    --bg: #08080C;
    --card: #101016;
    --border: #24242E;

    /* ========== Pixeliom Brand — Electric Violet — locked ========== */
    --accent: #8B5CF6;
    --accent-glow: #A78BFA;
    --accent-dark: #6D28D9;

    /* ========== Text — locked ========== */
    --text: #F4F2F8;
    --text-dim: #8B8994;

    /* ========== Status Colors — locked ========== */
    --danger: #F87171;
    --success: #34D399;
    --info: #60A5FA;
    --warning: #FBBF24;

    /* ========== Derived surfaces ========== */
    --surface-2: color-mix(in oklab, var(--card) 92%, var(--text));
    --surface-3: color-mix(in oklab, var(--card) 84%, var(--text));
    --hairline: var(--border);
    --hairline-strong: color-mix(in oklab, var(--border) 62%, var(--text));

    /* ========== Derived accent washes ========== */
    --accent-wash: color-mix(in oklab, var(--accent) 10%, transparent);
    --accent-wash-2: color-mix(in oklab, var(--accent) 20%, transparent);
    --accent-hairline: color-mix(in oklab, var(--accent) 45%, transparent);

    /* Ink that sits on an --accent fill. 4.7:1 — the only pairing that clears AA. */
    --accent-ink: var(--bg);
    /* Accent as *text* on --bg uses the lighter step. 7.3:1. */
    --accent-text: var(--accent-glow);
    --focus: var(--accent-glow);

    /* ========== Derived chrome ========== */
    --chrome: color-mix(in oklab, var(--bg) 78%, transparent);
    --overlay: color-mix(in oklab, var(--bg) 88%, transparent);
    --tint-hover: color-mix(in oklab, var(--text) 6%, transparent);

    /* ========== Typography ========== */
    --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
    --font-outlier: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    /* The Latin face, by name, for runs that must not take the locale binding:
     * prices, the wordmark, e-mail, phone, the language code, the numerals. */
    --font-latin: "Space Grotesk", "Manrope", "Segoe UI", system-ui, sans-serif;
    /* Locale files rebind this; LTR pages inherit the body face. */
    --font-locale: var(--font-body);

    --text-xs: 0.78rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: clamp(1.75rem, 3.4vw, 2.35rem);
    --text-3xl: clamp(2rem, 4.6vw, 3.1rem);
    --text-display: clamp(1.8rem, 6.1vw, 4.1rem);

    --track-display: -0.03em;
    --track-outlier: 0.16em;

    /* ========== Spacing — 4-point scale ========== */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 7rem;

    /* ========== Radii ========== */
    --radius-input: 6px;
    --radius-card: 10px;
    --radius-pill: 999px;

    /* ========== Motion ========== */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-snap: cubic-bezier(0.34, 0.9, 0.4, 1);
    --dur-fast: 140ms;
    --dur-short: 260ms;
    --dur-long: 620ms;

    /* ========== Layout ========== */
    --shell: 1180px;
    --measure: 64ch;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    /* ========== Z-index — six named levels, nothing arbitrary ========== */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-overlay: 400;
    --z-drawer: 500;
    --z-loader: 900;
}