/* ============================================================
   CLICKASE — KINETIC TYPOGRAPHY DESIGN TOKENS
   ------------------------------------------------------------
   High-energy brutalism: type is the interface, acid yellow is
   the only accent, everything stays brutally flat (no shadows),
   structure comes from 2px zinc borders + hard colour flips.

   Load this stylesheet FIRST on every page:

     <link rel="stylesheet" href="/static/css/tokens.css?v={{ app_version }}">

   Pages served as raw files (admin, disclaimer) use a literal
   ?v= instead of the Jinja app_version.

   Nothing else in the codebase may redefine these custom
   properties — page stylesheets only add layout/layout-scoped
   tokens on top (--section-py, --hover, --row-hover, ...).
   ============================================================ */

:root {
    /* ── COLOUR — DARK (default) ─────────────────────────────
       Rich black + off-white + ONE accent: brand mark red
       #FF1744 (the same hue as the "BOT" in the wordmark).
       Used boldly but sparingly — hover floods, focus rings,
       marquee bands, footer flip. Never pure #000/#FFF. */
    --bg: #09090B;              /* rich black — zinc-950 */
    --fg: #FAFAFA;              /* off-white — ~15:1 on bg */
    --muted: #27272A;           /* secondary surface — zinc-800 */
    --muted-fg: #A1A1AA;        /* body/descriptions — zinc-400 */
    --card-bg: #09090B;         /* cards = bg; 2px borders define them */
    --accent: #FF1744;          /* brand mark red */
    --accent-fg: #FFFFFF;       /* white ink on red fills/buttons */
    --border: #3F3F46;          /* zinc-700 — structural lines */
    --border-hover: #52525B;    /* zinc-600 — border lifts on hover */
    --input: #27272A;           /* input backgrounds */
    --ring: #FF1744;            /* focus states match accent */
    --overlay: rgba(9, 9, 11, 0.85);

    /* ── SEMANTIC — market direction & system state ──────────
       Green/red stay functional DATA colours for trading P&L.
       The brand accent is the wordmark red above, so themed
       surfaces never invent a second hue. */
    --green: #00C853;           /* gains / healthy */
    --green-fg: #000000;        /* ink on green fills (dark bg = bright green) */
    --red: #FF1744;             /* losses / urgent = brand red */
    --yellow: #DFE104;          /* LIVE-mode signal (not brand) */
    --yellow-fg: #000000;

    /* ── BORDERS ───────────────────────────────────────────── */
    --border-w: 1px;            /* thin, precise dividers */
    --border-w-thick: 2px;      /* accent underlines only */

    /* ── RADIUS — sharp edges only, everywhere ─────────────── */
    --radius: 0px;

    /* ── TYPE STACKS ───────────────────────────────────────── */
    --font-primary: "Space Grotesk", "Inter Tight", "Inter", system-ui, sans-serif;
    --font-display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
    --font: var(--font-primary);                          /* legacy alias */

    /* ── TYPE SCALE (rem — 16px root) ──────────────────────── */
    --text-xs: 0.75rem;          /* 12px — fine print */
    --text-sm: 0.875rem;         /* 14px — captions */
    --text-base: 1rem;           /* 16px — body */
    --text-lg: 1.125rem;         /* 18px — lead paragraphs */
    --text-xl: 1.25rem;          /* 20px — subheads */
    --text-2xl: 1.5rem;          /* 24px — section intros */
    --text-3xl: 2rem;            /* 32px — H3 */
    --text-4xl: 2.5rem;          /* 40px — H2 */
    --text-5xl: 3.5rem;          /* 56px — H1 mobile */
    --text-6xl: 4.5rem;          /* 72px — H1 tablet */
    --text-7xl: 6rem;            /* 96px — H1 desktop */
    --text-8xl: 8rem;            /* 128px — hero statement */
    --text-9xl: 10rem;           /* 160px — decorative numbers */

    /* ── TRACKING ──────────────────────────────────────────── */
    --tracking-tighter: -0.06em; /* display headlines */
    --tracking-tight: -0.04em;   /* large headings */
    --tracking-normal: -0.01em;  /* body, slightly tightened */
    --tracking-wide: 0.05em;     /* small labels */
    --tracking-wider: 0.1em;     /* all-caps labels */
    --tracking-widest: 0.2em;    /* sparse emphasis */

    /* ── LINE HEIGHT ───────────────────────────────────────── */
    --lh-none: 1;                /* single-line headlines */
    --lh-tight: 1.1;             /* multi-line headlines */
    --lh-snug: 1.25;             /* subheads */
    --lh-normal: 1.6;            /* body */
    --lh-relaxed: 1.75;          /* long-form reading */

    /* ── MOTION — fast and decisive, no bounce ─────────────── */
    --ease: cubic-bezier(0.25, 0, 0, 1);
    --dur-fast: 150ms;           /* buttons, underlines */
    --dur-base: 200ms;           /* colour transitions, accordion */
    --dur-slow: 500ms;           /* scroll reveals, image hovers */

    /* ── PAGE WIDTH — ONE container for every landing-style page ──
       Full-bleed by design: pages stretch to the viewport and the
       gutter comes from --content-pad. Landing, about, contact,
       login and signup all share this. Change it here once, never
       per page. (Dashboard is an app surface and keeps its own
       full-bleed layout.) */
    --content-max: 100%;
    --content-pad: 50px;
}

/* ── LIGHT — the inverse sheet ─────────────────────────────── */
[data-theme="light"],
body.light {
    --bg: #FAFAFA;
    --fg: #09090B;
    --muted: #F0F0F0;
    --muted-fg: #666666;
    --card-bg: #FFFFFF;
    /* The brand mark red carries text on white too — light gets
       the deeper mark (same move the old light vermillion made):
       fills use off-white text, ink usage passes AA. */
    --accent: #D90032;
    --accent-fg: #FAFAFA;
    --green-fg: #FAFAFA;
    --border: #D4D4D8;
    --border-hover: #A1A1AA;
    --input: #FFFFFF;
    --ring: #D90032;
    --overlay: rgba(9, 9, 11, 0.5);
    --green: #007A33;
    --red: #D90032;
    --yellow: #DFE104;
    --yellow-fg: #000000;
}

/* ============================================================
   GLOBALS
   ============================================================ */

/* Accent is a utility, not a component: one class, one meaning. */
.accent {
    color: var(--accent);
}

/* All-caps mono label — the system's rank marker for technical
   detail: stats, badges, section kickers, table heads. */
.label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    line-height: var(--lh-snug);
}

/* Focus: 2px accent outline, 2px offset. No glow, no fill. */
:focus-visible {
    outline: var(--border-w-thick) solid var(--ring);
    outline-offset: var(--border-w-thick);
}

/* Type as texture — a 1.5% fractal-noise grain over the whole
   page gives the dark ground a tactile, printed quality. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    pointer-events: none;
    opacity: 0.015;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}