/*
  PONTIMUS design tokens. Dark only.

  The palette is sampled from the logo (pontimus.png): helmet black, ground
  greens, a neon green stripe. The token *roles* follow a terminal layout - a
  background, three raised surfaces, three line weights and three text tiers -
  so a component can be written once and re-skinned by swapping this file.

  There is no light theme and no toggle. A single block means a colour can
  never exist in one theme and be missing from the other, which was the whole
  class of bug the old two-block file had to guard against.
*/

:root {
  /* surfaces */
  --bg: #050b07;
  --panel: #08120b;
  --raised: #0c1a10;
  --raised-2: #10231a;
  --wash: #06100a;

  /* lines, lightest to heaviest */
  --line: #12301a;
  --line-2: #1a4224;
  --line-3: #245a31;

  /* text tiers */
  --ink-bright: #eef7ef;
  --ink: #cfe3d2;
  --ink-2: #8fb197;
  /* The spec's #5c7a63 measured 4.01:1 on --panel and 3.46:1 on --raised-2,
     under WCAG AA for the 10-11px labels this tier is used for. #6e9174 is
     5.4:1 on --panel and 4.7:1 on --raised-2 and still sits clearly below
     --ink-2 in the hierarchy. */
  --ink-3: #6e9174;
  --ink-dim: rgba(238, 247, 239, 0.12);
  --text: var(--ink-bright);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);

  /* the accent: the stripe green from the mark */
  --green: #67d54b;
  --green-bright: #87e95e;
  --green-deep: #0f5d1e;
  --green-dim: rgba(103, 213, 75, 0.14);
  --green-line: rgba(103, 213, 75, 0.28);
  --green-tint: rgba(103, 213, 75, 0.06);
  --on-green: #050b07;
  --grad-green: linear-gradient(180deg, #87e95e, #3f9a2d);
  --grad-accent: linear-gradient(135deg, #67d54b, #87e95e);

  /* The cyan stripe. LIVE dot and brand-mark accent ONLY - anywhere else it
     competes with the green for "this is the live thing". */
  --stripe: #62d9ff;

  /* semantic */
  --pos: #87e95e;
  --pos-text: #87e95e;
  --neg: #ff6b5e;
  --warn: #f5c451;

  /* charts */
  --chart-up: var(--pos);
  --chart-down: var(--neg);
  --chart-grid: #0c1a10;
  --chart-axis: #1a4224;
  --chart-text: #6e9174;
  --chart-vol: #10231a;
  --chart-cross: var(--green);
  --band-fill: rgba(103, 213, 75, 0.13);
  --band-edge: var(--green);
  --band-own-fill: rgba(238, 247, 239, 0.05);
  --band-own-edge: var(--ink);

  /* brand mark */
  --mark-body: #0b1a0f;
  --mark-apex: var(--green);

  /* radii */
  --r-full: 999px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 9px;

  /* type */
  --f-mono: var(--font-mono, 'JetBrains Mono'), ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-sans: var(--font-sans, 'Inter'), ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-display: var(--font-display, 'Space Grotesk'), var(--f-sans);
  --track: 0.14em;
  --fs-display: clamp(40px, 6vw, 78px);
  --fs-h1: clamp(28px, 4vw, 44px);
  --fs-h2: clamp(22px, 3vw, 30px);
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-micro: 10px;
  --lh-body: 1.65;

  /* motion */
  --dur: 0.16s;
  --dur-press: 0.12s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* depth */
  --sheen: rgba(238, 247, 239, 0.06);
  --glass-bg: rgba(8, 18, 11, 0.55);
  --glass-line: rgba(255, 255, 255, 0.09);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
  --glow-green: 0 0 0 1px rgba(103, 213, 75, 0.16), 0 8px 30px -8px rgba(103, 213, 75, 0.22);
  --glow-green-strong: 0 0 0 1px rgba(103, 213, 75, 0.3), 0 10px 40px -8px rgba(103, 213, 75, 0.36);
  --card-wash: linear-gradient(180deg, rgba(103, 213, 75, 0.05), transparent 42%);
  --edge-glow: rgba(103, 213, 75, 0.45);

  /* The signature panel: hero cards, the clan profile key panel. */
  --signature-bg:
    radial-gradient(circle at 14% 0%, rgba(103, 213, 75, 0.16), rgba(0, 0, 0, 0) 52%),
    linear-gradient(145deg, #0b1a0f, #08120b 64%);
  --signature-shadow:
    inset 0 1px 0 rgba(135, 233, 94, 0.14),
    0 0 0 1px rgba(103, 213, 75, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.45);

  /* layout */
  --rail-w: 56px;
  --rail-w-open: 212px;
  --topbar-h: 66px;
  --tabbar-h: 58px;
  --positions-max-h: 620px;
}

/* The green is bright enough to strobe on a dark ground; drop the motion for
   anyone who has asked for less of it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0s;
    --dur-press: 0s;
  }
}