/* ==========================================================================
   Design tokens
   Single source of truth for color, type, spacing, motion and elevation.
   Chart series colors are validated for dark-surface contrast and CVD
   separation — do not hand-edit them without re-validating.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Surfaces -------------------------------------------------------- */
  --bg-base: #0a0e14;
  --surface-1: #141a23;
  --surface-2: #1a212c;
  --surface-3: #222b38;

  /* Glass layers: translucent fills that sit over the ambient background */
  --glass-bg: rgba(255, 255, 255, 0.035);
  --glass-bg-strong: rgba(255, 255, 255, 0.055);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-strong: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.10);
  --glass-blur: 18px;
  /* One glass recipe. Card, sidebar, topbar and popovers each had their own
     blur/saturate pairing, which made the same material look like three. */
  --glass-filter: blur(var(--glass-blur)) saturate(140%);

  /* Recessed fields — code blocks, inputs, the donation address. Four
     different black alphas were doing this job. */
  --surface-inset: rgba(0, 0, 0, 0.28);

  /* Floating surfaces — tooltips, toasts. Near-opaque so text stays crisp
     over whatever is behind them. */
  --surface-overlay: rgba(20, 26, 35, 0.97);

  /* Hairline between rows inside a panel. Lighter than --glass-border,
     which is the panel's own edge. */
  --divider: rgba(255, 255, 255, 0.045);

  /* --- Ink ------------------------------------------------------------- */
  --text-primary: #f2f5f9;
  --text-secondary: #a7b2c2;
  --text-muted: #6b7787;
  --text-inverse: #0a0e14;

  /* --- Brand ----------------------------------------------------------- */
  /* Bitcoin orange is UI chrome (accents, focus, glow), not a chart mark. */
  --brand: #f7931a;
  --brand-hover: #ffa83d;
  --brand-dim: rgba(247, 147, 26, 0.14);
  --brand-glow: rgba(247, 147, 26, 0.28);
  --brand-border-hover: rgba(247, 147, 26, 0.3);
  /* Brand colour at text weight. Identical to --brand here — on a near-black
     surface the mark already clears AA — but split out so a light theme can
     darken brand-coloured *text* without muddying plates, fills and chart
     marks, which have no contrast obligation at text size. */
  --brand-ink: var(--brand);

  /* --- Status (reserved — never reused as a series color) --------------- */
  --status-good: #199e70;
  --status-good-dim: rgba(25, 158, 112, 0.14);
  --status-warning: #c98500;
  --status-warning-dim: rgba(201, 133, 0, 0.14);
  --status-serious: #d95926;
  --status-serious-dim: rgba(217, 89, 38, 0.14);
  --status-critical: #e66767;
  --status-critical-dim: rgba(230, 103, 103, 0.14);

  /* --- Chart series (fixed order, never cycled) ------------------------- */
  /* Validated: dark surface #141a23 — lightness band, chroma, CVD, contrast. */
  --series-1: #cc7a10; /* pool hashrate    */
  --series-2: #3987e5; /* network hashrate */
  --series-3: #199e70; /* difficulty       */
  --series-4: #9085e9; /* workers          */
  --series-5: #d55181; /* shares / SPS     */

  /* --- News categories --------------------------------------------------
     Brighter siblings of the series hues: same families as the charts, but
     lifted so a topic is identifiable from the label colour alone at 9px.
     Contrast against the card surface (#13161c) runs 6.8:1 to 8.6:1, versus
     the 5:1 the chart-weight versions managed at this size.

     `bitcoin` is the unclassified bucket and is deliberately the one neutral:
     reserving saturation for real topics is what makes them scannable. */
  --news-mining: #f0a030;      /* amber  — 8.4:1 */
  --news-market: #22c48c;      /* mint   — 8.1:1 */
  --news-regulation: #f27b76;  /* rose   — 6.8:1 */
  --news-tech: #5aa2ff;        /* blue   — 6.9:1 */
  --news-network: #2bc4d8;     /* cyan   — 8.6:1 */
  --news-security: #a99cff;    /* violet — 7.7:1 */
  --news-bitcoin: #8ea3bd;     /* steel  — 7.0:1 */

  /* --- Chart chrome ---------------------------------------------------- */
  --grid-line: rgba(255, 255, 255, 0.06);
  --axis-line: rgba(255, 255, 255, 0.12);

  /* --- Typography ------------------------------------------------------ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas,
    "Liberation Mono", Menlo, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;

  --lh-display: 1.1;
  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* Only four weights. The stack declares Inter but no webfont is bundled,
     so on the system fallback anything above 600 renders as 700 — the
     600/620/650/660/680/750 spread this replaces drew distinctions the
     user could never see. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Tracking, by role. Uppercase micro-labels open up; large numerals
     tighten. Everything in between sits at the heading default. */
  --tracking-label: 0.08em;
  --tracking-heading: -0.02em;
  --tracking-display: -0.03em;

  /* Icon scale. Sizes are paired to the text they sit beside rather than
     chosen per component, which is how 11/14/15/16/18 crept in. */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 18px;
  --icon-xl: 24px;
  --icon-2xl: 30px;

  /* One height for every interactive control, so buttons, segmented
     controls, inputs and copy fields sit on a single baseline wherever
     they appear together. */
  --control-h: 36px;
  --control-h-sm: 28px;

  /* --- Spacing (4px base) ---------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* --- Radii ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* --- Layout ----------------------------------------------------------- */
  /* Widened for the donation panel: the QR is the primary donation path and
     a bigger symbol scans more reliably. Costs 20px from a 1440px content
     column, which nothing else in the layout notices. */
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --content-max: 1440px;
  --z-sidebar: 40;
  --z-topbar: 30;
  --z-overlay: 50;
  --z-toast: 60;
}

/* Users who ask for less motion get none of the decorative kind. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}