:root {
  /* Native rendering */
  color-scheme: dark;
  --native-control-color-scheme: dark;
  --native-control-accent-color: #c9f24b;
  --native-control-caret-color: #c9f24b;

  /* Jet-black foundation with a PERCEPTIBLE plane ramp.
     Measured before: page #000000 -> card #070707 was 1.9 L* apart (1.04:1),
     so a card could not read as a raised object at all. Every step below is
     >=2.7 L* apart, comfortably over the ~1-2 L* JND for large adjacent
     fields, and the page itself stays jet black. */
  --color-bg: #000000;
  --color-bg-raised: #0a0a0a;
  --color-surface: #131313;
  --color-surface-elevated: #1c1c1c;
  --color-surface-hover: #232323;
  --color-surface-high: #282828;
  --color-surface-active: #303030;
  --color-surface-glass: rgb(10 10 10 / 0.86);
  --color-surface-metal: #1f1f1f;
  --color-surface-inverse: #f5f5f5;
  --color-backdrop: rgb(0 0 0 / 0.84);

  /* Text ladder: four steps >=7 L* apart, each clearing AA 4.5:1 on every
     surface in the ramp. It can stay short because hierarchy is also carried
     by size, weight and case. --color-text-subtle was #737373, which failed
     AA (4.43:1) even on pure black. */
  --color-text: #ffffff;
  --color-text-secondary: #d4d4d4;
  --color-text-muted: #a3a3a3;
  --color-text-subtle: #8f8f8f;
  --color-text-disabled: #525252;
  /* Ink for light emphasis surfaces. Without a real on-light ladder,
     components hardcode near-blacks and a specificity tie then renders them
     on a dark background — that exact bug has shipped twice this session. */
  --color-text-inverse: #0a0a0a;
  --color-text-inverse-secondary: #2e2e2e;
  --color-text-inverse-muted: #525252;

  /* Acid green is the ONLY chromatic accent and it is rationed: live data,
     positive values, and the single primary action in a view. Nothing else.
     It replaces two competing languages — --color-accent was #ffffff, i.e.
     identical to body text, so "accent" signalled nothing, while a hardcoded
     cyan #00f2fe was the real accent in the chart terminal. */
  --color-accent: #c9f24b;
  --color-accent-hover: #d8fa66;
  --color-accent-active: #b2db35;
  --color-accent-muted: #9cb84a;
  /* Accent is unusable as ink on light surfaces (1.29:1 on white). This is
     its partner for the inverted/white surfaces: 7.99:1 on #ffffff. */
  --color-accent-deep: #425800;
  --color-accent-soft: rgb(201 242 75 / 0.14);
  --color-accent-softer: rgb(201 242 75 / 0.07);
  --color-on-accent: #0a0a0a;
  /* Semantic alias so live-data marks read as live, not as decoration. */
  --color-live: var(--color-accent);

  /* Borders no longer carry separation alone — they pair with the surface ramp
     and the specular edge below, so they can be quieter than before. */
  --color-border-subtle: rgb(255 255 255 / 0.07);
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.24);
  --color-border-accent: rgb(201 242 75 / 0.55);
  --color-highlight: rgb(255 255 255 / 0.08);
  --color-divider: rgb(255 255 255 / 0.09);
  --color-border-inverse: rgb(0 0 0 / 0.18);

  /* Semantic hues. Before this, --color-success and --color-error were BOTH
     #ffffff: a gain and a loss rendered identically and the colour channel
     carried no information whatsoever. Hue is redundant reinforcement only —
     every state keeps its text label and its sign. */
  --color-success: var(--color-accent);
  --color-success-soft: rgb(201 242 75 / 0.13);
  --color-success-border: rgb(201 242 75 / 0.42);
  --color-on-success: #0a0a0a;
  --color-warning: #ffb340;
  --color-warning-soft: rgb(255 179 64 / 0.13);
  --color-warning-border: rgb(255 179 64 / 0.4);
  --color-on-warning: #0a0a0a;
  --color-error: #ff6b5c;
  --color-error-soft: rgb(255 107 92 / 0.14);
  --color-error-border: rgb(255 107 92 / 0.46);
  --color-on-error: #0a0a0a;
  --color-info: #bdbdbd;
  --color-info-soft: rgb(189 189 189 / 0.1);
  --color-info-border: rgb(189 189 189 / 0.32);
  --color-on-info: #0a0a0a;

  /* Form controls sit on the sunken end of the ramp: a control is a well you
     type into, not a raised object, so it reads darker than the card it is on
     and takes its highlight on the bottom edge (see --edge-specular-sunken). */
  --color-control-bg: #171717;
  --color-control-bg-hover: #202020;
  --color-control-bg-disabled: #101010;
  --color-control-text: #ffffff;
  --color-control-placeholder: #8f8f8f;
  --color-control-border: rgb(255 255 255 / 0.18);
  --color-control-border-hover: rgb(255 255 255 / 0.34);
  --color-control-border-focus: var(--color-accent);
  --color-control-autofill-bg: #202020;
  --color-control-autofill-text: #ffffff;
  --color-control-caret: var(--color-accent);

  /* Selection */
  --color-selection-bg: #ffffff;
  --color-selection-text: #000000;

  /* Shine on jet black, done as specular reflection rather than glass or glow.
     One implied light source, above. --sheen-* is a base-independent overlay:
     bright at the top edge, gone by mid-height, with a slight darkening at the
     bottom so the form turns away from the light. Composite it over any ramp
     colour. No blur, no coloured haze, no outer glow anywhere. */
  --sheen-raised: linear-gradient(180deg, rgb(255 255 255 / 0.06) 0%, rgb(255 255 255 / 0.018) 34%, rgb(255 255 255 / 0) 58%, rgb(0 0 0 / 0.16) 100%);
  --sheen-raised-hover: linear-gradient(180deg, rgb(255 255 255 / 0.09) 0%, rgb(255 255 255 / 0.03) 36%, rgb(255 255 255 / 0) 60%, rgb(0 0 0 / 0.14) 100%);
  --sheen-sunken: linear-gradient(180deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.06) 42%, rgb(255 255 255 / 0.022) 100%);

  /* Composite surfaces: what a component should actually reach for. */
  --surface-card: var(--sheen-raised), linear-gradient(var(--color-surface), var(--color-surface));
  --surface-card-hover: var(--sheen-raised-hover), linear-gradient(var(--color-surface-hover), var(--color-surface-hover));
  --surface-panel: var(--sheen-raised), linear-gradient(var(--color-surface-elevated), var(--color-surface-elevated));
  --surface-well: var(--sheen-sunken), linear-gradient(var(--color-bg-raised), var(--color-bg-raised));
  --surface-selected: linear-gradient(180deg, rgb(201 242 75 / 0.15) 0%, rgb(201 242 75 / 0.04) 100%), linear-gradient(var(--color-surface-elevated), var(--color-surface-elevated));

  --gradient-page: radial-gradient(circle at 58% -18rem, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0) 42rem), linear-gradient(180deg, #060606 0%, #000000 44rem);
  --gradient-surface: var(--surface-card);
  --gradient-surface-hover: var(--surface-card-hover);
  --gradient-gloss: linear-gradient(180deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0.02) 36%, rgb(255 255 255 / 0) 60%);
  --gradient-metal: linear-gradient(135deg, #3a3a3a 0%, #181818 44%, #2c2c2c 72%, #101010 100%);
  --gradient-accent: linear-gradient(180deg, #d8fa66 0%, #c9f24b 52%, #b2db35 100%);
  --gradient-accent-soft: radial-gradient(circle at 50% 0%, rgb(201 242 75 / 0.16), rgb(201 242 75 / 0) 70%);
  --gradient-scrim: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / 0.9));

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  --font-display: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  /* Sub-xs mono tier. Three files had independently reached for raw 9px/10px/
     11px for dense mono annotations because the scale stopped at 12px. */
  --text-3xs: 0.5625rem;
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;
  --text-display: clamp(2.75rem, 4.6vw, 4.75rem);
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.035em;
  --tracking-snug: -0.018em;
  --tracking-normal: 0;
  --tracking-wide: 0.045em;
  --tracking-caps: 0.12em;
  --font-feature-numeric: "tnum" 1, "zero" 1;

  /* Four-pixel spacing scale, with half-steps below 1rem. The dense mono HUD
     on the chart terminal genuinely needs a finer grid than 4px at its
     smallest sizes — the same pressure that made three files reach for raw
     9/10/11px type before --text-3xs/--text-2xs existed. */
  --space-0: 0;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-13: 3.25rem;
  --space-14: 3.5rem;
  --space-15: 3.75rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Shape */
  --radius-none: 0;
  --radius-xs: 0.25rem;
  /* 6px: sits between --radius-xs and --radius-sm, so it gets a purpose name
     rather than a scale name that would imply it is smaller than xs. */
  --radius-hud: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-pill: 999rem;
  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-xl);

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;
  --border-subtle: var(--border-width) solid var(--color-border-subtle);
  --border-default: var(--border-width) solid var(--color-border);
  --border-strong: var(--border-width) solid var(--color-border-strong);
  --border-accent: var(--border-width) solid var(--color-border-accent);
  --border-success: var(--border-width) solid var(--color-success-border);
  --border-warning: var(--border-width) solid var(--color-warning-border);
  --border-error: var(--border-width) solid var(--color-error-border);

  /* Elevation. THE KEY CONSTRAINT ON THIS SITE: a cast shadow is invisible on
     a #000000 page, because black over black composites to exactly black. The
     entire old ramp was therefore dead code on the page background. Lift now
     comes from the surface ramp plus a specular top edge; the cast component
     only earns its keep when a surface sits over another surface (modal over
     card). Every step leads with the specular edge so it always does something. */
  --edge-specular: inset 0 1px 0 rgb(255 255 255 / 0.09);
  --edge-specular-strong: inset 0 1px 0 rgb(255 255 255 / 0.15);
  --edge-specular-sunken: inset 0 1px 2px rgb(0 0 0 / 0.55), inset 0 -1px 0 rgb(255 255 255 / 0.045);
  /* A light surface turns away from the same overhead light on its BOTTOM
     edge, so the inverse of the specular edge is a soft dark bottom line. */
  --edge-specular-inverse: inset 0 -1px 0 rgb(0 0 0 / 0.12);
  --ring-selected: 0 0 0 var(--border-width-strong) var(--color-accent), var(--edge-specular-strong);
  --shadow-xs: var(--edge-specular);
  --shadow-sm: var(--edge-specular), 0 1px 2px rgb(0 0 0 / 0.55), 0 6px 16px rgb(0 0 0 / 0.4);
  --shadow-md: var(--edge-specular), 0 2px 4px rgb(0 0 0 / 0.6), 0 14px 36px rgb(0 0 0 / 0.5);
  --shadow-lg: var(--edge-specular-strong), 0 4px 10px rgb(0 0 0 / 0.7), 0 32px 72px rgb(0 0 0 / 0.62);
  --shadow-inset: var(--edge-specular-sunken);
  --shadow-focus: 0 0 0 3px rgb(201 242 75 / 0.42);
  --color-focus-ring: var(--color-accent);
  --shadow-focus-error: 0 0 0 3px rgb(255 107 92 / 0.45);
  --shadow-accent: var(--edge-specular-strong), 0 10px 30px rgb(201 242 75 / 0.13);

  /* Controls and layout primitives */
  --size-touch-min: 2.75rem;
  --size-control-sm: 2.75rem;
  --size-control-md: 3rem;
  --size-control-lg: 3.5rem;
  --size-icon-xs: 0.875rem;
  --size-icon-sm: 1rem;
  --size-icon-md: 1.125rem;
  --size-icon-lg: 1.5rem;
  --size-icon-xl: 2rem;
  --layout-content-max: 104rem;
  --layout-readable-max: 44rem;
  --layout-sidebar-width: 14rem;
  --layout-header-height: 4.75rem;
  --layout-mobile-nav-height: 4.75rem;
  --layout-page-gutter: var(--space-8);
  --layout-section-gap: var(--space-24);
  --layout-card-gap: var(--space-5);

  /* Market terminal geometry and density. These named contracts keep the
     loading and settled compositions on identical tracks at every width. */
  --terminal-command-block-size: 3.25rem;
  --terminal-tape-block-size: var(--space-9);
  --terminal-panel-bar-block-size: var(--space-10);
  --terminal-leader-head-block-size: var(--space-8);
  --terminal-row-block-size: var(--size-touch-min);
  --terminal-scanner-bar-block-size: var(--size-touch-min);
  --terminal-scanner-head-block-size: var(--space-9);
  --terminal-preview-quote-block-size: var(--space-13);
  --terminal-map-evidence-block-size: 26.5rem;
  --terminal-upper-block-size: 29rem;
  --terminal-lower-block-size: 24.25rem;
  --terminal-data-block-size: 53.25rem;
  --terminal-compact-command-row-block-size: var(--size-control-md);
  --terminal-phone-map-block-size: calc(var(--space-32) * 2);
  --terminal-phone-row-wide-block-size: 5.5rem;
  --terminal-phone-row-narrow-block-size: var(--space-24);
  --terminal-scanner-min-inline-size: 58.75rem;
  --terminal-command-edge-wide: var(--space-2);
  --terminal-command-gap-wide: var(--space-2);
  --terminal-command-route-wide: max-content;
  --terminal-command-search-wide: 11.25rem;
  --terminal-command-filter-wide: 5.625rem;
  --terminal-command-result-wide: 7.5rem;
  --terminal-command-ages-wide: 5.5rem;
  --terminal-command-edge-compact: var(--space-3);
  --terminal-command-gap-compact: var(--space-2);
  --terminal-command-route-compact: 6.25rem;
  --terminal-command-search-compact: 19rem;
  --terminal-command-filter-compact: 6.5rem;
  --terminal-command-result-compact: 8.75rem;
  --terminal-command-ages-compact: 6.5rem;
  --terminal-command-edge-phone: var(--space-4);
  --terminal-content-gutter-phone: var(--space-3);
  --terminal-content-gutter-narrow: var(--space-2);
  --terminal-map-target-radius: 1.375rem;
  --terminal-spot-asset-inline-size: 7.5rem;
  --terminal-spot-price-inline-size: 5.5rem;
  --terminal-spot-change-inline-size: 4rem;
  --terminal-perp-asset-inline-size: 7rem;
  --terminal-perp-mark-inline-size: 5rem;
  --terminal-perp-change-inline-size: 4rem;
  --terminal-perp-volume-inline-size: 4.5rem;
  --terminal-scanner-asset-inline-size: 12.5rem;
  --terminal-scanner-type-inline-size: 4.5rem;
  --terminal-scanner-spot-inline-size: 6.75rem;
  --terminal-scanner-change-inline-size: 5.5rem;
  --terminal-scanner-volume-inline-size: 7.25rem;
  --terminal-scanner-venues-inline-size: 7.75rem;
  --terminal-preview-identity-inline-size: 12.75rem;
  --terminal-preview-primary-action-inline-size: 13.5rem;
  --terminal-preview-source-action-inline-size: 10.25rem;
  --terminal-preview-overflow-inline-size: var(--size-touch-min);
  --terminal-drawer-inline-size: 20rem;
  --terminal-map-plane-min-inline-size: 42rem;
  --terminal-ranked-list-min-inline-size: 42rem;
  --terminal-ranked-list-phone-min-inline-size: 38rem;
  --terminal-tooltip-max-inline-size: 20rem;
  --terminal-control-radius: var(--radius-xs);

  /* Transparency and optical effects */
  --opacity-disabled: 0.46;
  --opacity-muted: 0.72;
  --opacity-overlay: 0.88;
  --blur-glass: 1.25rem;

  /* Motion: quiet, quick, exponential */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --duration-slower: 600ms;
  /* The live-feed heartbeat. Deliberately much slower than any UI transition:
     it signals a live connection, it is not feedback for an interaction. */
  --duration-pulse: 1800ms;
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-colors: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-opacity: opacity var(--duration-base) var(--ease-out);

  /* Layer order */
  --z-base: 0;
  --z-sticky: 10;
  --z-header: 20;
  --z-dropdown: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
}