/* ==========================================================================
   SignalForge design tokens — the single place the product's look is tuned.
   Concept: "the forge" — graphite metal surfaces, one ember accent that is
   earned (signals, the live tape edge), cool steel for interaction. PAPER is
   steel-blue; LIVE is unmistakable ember-red and never colour-alone (always
   labelled REAL MONEY). Gains/losses always pair colour with sign/arrow.

   Type pairing: Space Grotesk (display; OFL licence, self-hosted) over the
   system UI stack for body, with tabular numerals for every figure column.
   ========================================================================== */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/SpaceGrotesk-var.woff2') format('woff2');
}

:root {
    /* --- palette: graphite ----------------------------------------------- */
    --ink-950: #101418;          /* page background */
    --ink-900: #151a20;          /* deep surface (header) */
    --ink-800: #1c232b;          /* card surface */
    --ink-700: #29323d;          /* borders, dividers */
    --ink-600: #3a4654;          /* strong borders, disabled */

    --text-strong: #eef1f4;      /* ~14.9:1 on ink-950 */
    --text-body: #d6dbe1;        /* ~11.7:1 */
    --text-muted: #9aa6b2;       /* ~6.0:1 — AA for body text */

    /* --- the ember (signature accent — use sparingly) -------------------- */
    --ember-400: #ffa05c;        /* ~8.6:1 on ink-950 */
    --ember-500: #ff8a3d;
    --ember-600: #e06a1f;

    /* --- steel (interactive: links, buttons, focus) ----------------------- */
    --steel-300: #8db8ff;        /* ~8.5:1 on ink-950 */
    --steel-400: #6ea8ff;        /* ~7.0:1 */
    --steel-600: #2f6fb0;

    /* --- semantic: money ------------------------------------------------- */
    --gain: #41d99d;             /* ~9.3:1 on ink-950; always with +/▲ */
    --loss: #ff7a70;             /* ~6.4:1 on ink-950; always with −/▼ */

    /* --- semantic: mode (never colour alone — banners carry text) -------- */
    --paper: #2f6fb0;            /* steel: calm, simulated */
    --paper-ink: #ffffff;
    --live: #c22f2f;             /* ember-red: real money */
    --live-ink: #ffffff;

    /* --- semantic: status ------------------------------------------------- */
    --success: #2f8f5b;
    --danger: #c4554d;
    --warning: #b98a2e;

    /* --- type -------------------------------------------------------------- */
    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    /* --- space scale (4px base) -------------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.5rem;
    --sp-8: 3rem;

    /* --- shape & elevation -------------------------------------------------- */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.35);

    /* --- motion (calm, purposeful) ------------------------------------------ */
    --dur-fast: 120ms;
    --dur: 200ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    /* --- layout -------------------------------------------------------------- */
    --measure: 72rem;            /* main column max width */
    --measure-narrow: 28rem;     /* auth cards */
}

/* Reduced motion: motion is a nicety, never information. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}