/*! gte-brand.css v2026-10-23 — GTE design tokens, density-tiered type scale, and atom classes.
 *  Source of truth: the gte-design skill + gte-design-system tokens. Do not edit by hand:
 *  apps/typescript/design-hub/scripts/build-stylesheet.ts regenerates this file.
 *  Load: <link rel="stylesheet" href="https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/gte-brand.css?v=2026-10-23">
 *  Docs: https://assets.design.gte.xyz/design-hub/4a09d98e7dab6035bc759ec45201735b0b2d7d2abc6dacc7a89cb93aef8fd2d7/design.md
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ──────────────────────────────────────────────────────────────
   GTE Design System — Colors & Typography
   Owned by the design hub: this file is the source of truth for the
   published tokens (build-stylesheet.ts reads it) and is no longer
   overwritten by import-skill. Product tokens mirror the Supernova export
   in gte-web /src/shared/styles/generated/supernova-tokens.desktop.css;
   the BRAND 2026 sections below come from the GTE Brand 2026 Figma file.
   ─────────────────────────────────────────────────────────── */

/* Webfonts (local) */
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* APK Protocol (APK Type, licensed) — the brand headline face. One variable
   file carries weights 100–800; the boards use SemiBold (600) only. Italics
   live on a `slnt` axis (0–11), exposed here as oblique so `font-style:
   italic` resolves without a second file. */
@font-face {
  font-family: "APK Protocol";
  src: url("./fonts/APKProtocol-Variable.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "APK Protocol";
  src: url("./fonts/APKProtocol-Variable.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: oblique 0deg 11deg;
  font-display: swap;
}

/* Inter via CDN (used for heading + body per Supernova) */


:root {
  /* ─── BRAND / ACCENT ─────────────────────────────────────── */
  --accent:            rgb(255, 120,  23);  /* orange-600 — GTE signature */
  --accent-light:      rgb(255, 147,  69);  /* orange-400 */
  --accent-muted:      rgba(255, 120, 23, 0.15);
  --accent-transparent:rgba(255, 120, 23, 0);
  --text-accent:       rgb(255, 147,  69);  /* orange used as TEXT (links, accent numerals): bright on dark.
                                               Darkens under data-theme="light" for contrast. Orange FILLS (buttons) unaffected. */

  /* INTENTIONAL hue split (faithful to Supernova): solid semantic text/icon
     uses the -400 step; muted tint fills derive from the -600 step. So a tint
     behind solid semantic text is a deeper shade of the same family, by design.
     Do NOT "correct" these to match — it would diverge from the repo. */
  --positive:          rgb(46, 232, 139);   /* green-400 — long / bid / up (solid) */
  --positive-muted:    rgba(16, 198, 107, 0.15); /* green-600 @15% — tint fill */
  --negative:          rgb(255, 102, 125);  /* red-400 — short / ask / down (solid) */
  --negative-muted:    rgba(248,  68,  95, 0.15); /* red-600 @15% — tint fill */

  /* ─── ORANGE SCALE ───────────────────────────────────────── */
  --orange-0:    rgba(255, 120, 23, 0);
  --orange-15:   rgba(255, 120, 23, 0.15);
  --orange-25:   rgba(255, 120, 23, 0.25);
  --orange-40:   rgba(255, 120, 23, 0.4);
  --orange-200:  rgb(255, 178, 122);
  --orange-400:  rgb(255, 147,  69);
  --orange-600:  rgb(255, 120,  23);
  --orange-800:  rgb(235,  98,   0);
  --orange-1000: rgb(189,  79,   0);

  /* ─── GREEN SCALE ────────────────────────────────────────── */
  --green-0:    rgba(16, 198, 107, 0);
  --green-15:   rgba(16, 198, 107, 0.15);
  --green-25:   rgba(16, 198, 107, 0.25);
  --green-200:  rgb(124, 248, 186);
  --green-400:  rgb(46,  232, 139);
  --green-600:  rgb(16,  198, 107);
  --green-800:  rgb(9,   170,  89);
  --green-1000: rgb(0,   138,  69);

  /* ─── RED SCALE ──────────────────────────────────────────── */
  --red-0:    rgba(248, 68, 95, 0);
  --red-15:   rgba(248, 68, 95, 0.15);
  --red-25:   rgba(248, 68, 95, 0.25);
  --red-200:  rgb(255, 143, 160);
  --red-400:  rgb(255, 102, 125);
  --red-600:  rgb(248,  68,  95);
  --red-800:  rgb(241,  34,  65);
  --red-1000: rgb(217,  18,  48);

  /* ─── BLACK SCALE (surfaces + overlays) ──────────────────── */
  --black-0:    rgba(1, 3, 4, 0);
  --black-6:    rgba(1, 3, 4, 0.06);
  --black-8:    rgba(1, 3, 4, 0.08);
  --black-12:   rgba(1, 3, 4, 0.12);
  --black-15:   rgba(1, 3, 4, 0.15);
  --black-30:   rgba(1, 3, 4, 0.3);
  --black-50:   rgba(1, 3, 4, 0.5);
  --black-200:  rgb(64, 69, 73);
  --black-400:  rgb(48, 52, 54);
  --black-600:  rgb(31, 34, 35);
  --black-800:  rgb(24, 26, 27);
  --black-900:  rgb(16, 18, 19);
  --black-1000: rgb( 1,  3,  4);

  /* ─── WHITE SCALE (text + strokes) ───────────────────────── */
  --white-0:    rgba(255,255,255,0);
  --white-6:    rgba(255,255,255,0.06);
  --white-15:   rgba(255,255,255,0.15);
  --white-50:   rgba(255,255,255,0.5);
  --white-200:  rgb(255,255,255);
  --white-400:  rgb(211,212,212);
  --white-600:  rgb(166,167,168);
  --white-800:  rgb(106,110,113);
  --white-1000: rgb( 84, 87, 90);

  /* ─── GREY SCALE (light-mode surfaces, named by channel) ─── */
  --grey-240:   rgb(240,240,240);
  --grey-244:   rgb(244,244,244);
  --grey-246:   rgb(246,246,246);
  --grey-250:   rgb(250,250,250);

  /* ─── SEMANTIC — TEXT (dark mode · default) ──────────────── */
  --text-high:              rgb(255,255,255);   /* white-200 */
  --text-mid:               rgb(166,167,168);   /* white-600 */
  --text-low:               rgb(106,110,113);   /* white-800 */
  --text-positive:          rgb(46,232,139);    /* green-400 */
  --text-negative:          rgb(255,102,125);   /* red-400 */
  --text-action-primary:       rgb( 1,  3,  4); /* black-1000 — on orange CTAs */
  --text-action-primary-hover: rgb(24, 26, 27); /* black-800 */
  --text-action-positive:       rgb(16,198,107); /* green-600 */
  --text-action-positive-hover: rgb(124,248,186);/* green-200 */
  --text-action-negative:       rgb(248, 68, 95);/* red-600 */
  --text-action-negative-hover: rgb(255,102,125);/* red-400 */
  --text-action-tertiary:       rgb(166,167,168);/* white-600 */
  --text-action-tertiary-hover: rgb(211,212,212);/* white-400 */

  /* ─── SEMANTIC — SURFACES (dark mode — default theme) ───── */
  /* Per spec: surface-default = black-1000, reserved for future layouts
     that want a deeper floor. For now the product canvas renders on
     surface-elevated-1 (cards on surface-default become elevated-2). */
  --surface-default:      rgb( 1,  3,  4);   /* black-1000 — reserved */
  --surface-elevated-1:   rgb(16, 18, 19);   /* black-900 — app canvas (default) */
  --surface-elevated-2:   rgb(24, 26, 27);   /* black-800 — cards / panels */
  --surface-overlay:      rgb(24, 26, 27);   /* black-800 — popovers / dropdowns */
  --surface-input:        rgba(255,255,255,0.06);

  --surface-action-primary:         rgb(235, 98, 0);     /* orange-800 */
  --surface-action-primary-hover:   rgb(255,120,23);      /* orange-600 */
  --surface-action-secondary:       rgba(255,120,23,0.15); /* orange-15 */
  --surface-action-secondary-hover: rgba(255,120,23,0.25); /* orange-25 */
  --surface-action-tertiary:        rgba(255,255,255,0.06); /* white-6 */
  --surface-action-tertiary-hover:  rgba(255,255,255,0.15); /* white-15 */
  --surface-action-positive:        rgb(0,138,69);        /* green-1000 */
  --surface-action-positive-hover:  rgb(16,198,107);      /* green-600 */
  --surface-action-positive-secondary:       rgba(16,198,107,0.15); /* green-15 */
  --surface-action-positive-secondary-hover: rgba(16,198,107,0.25); /* green-25 */
  --surface-action-negative:        rgb(217,18,48);       /* red-1000 */
  --surface-action-negative-hover:  rgb(248,68,95);       /* red-600 */
  --surface-action-negative-secondary:       rgba(248,68,95,0.15);  /* red-15 */
  --surface-action-negative-secondary-hover: rgba(248,68,95,0.25);  /* red-25 */

  /* ─── LEGACY ALIASES — DO NOT USE IN NEW WORK ────────────────
     These do NOT exist in the gte-web Supernova export. They were
     invented for the older preview cards only. New surfaces must use
     the canonical set above (surface-default / -elevated-1 / -elevated-2
     / -overlay / -input). Mapping if you hit one in old preview markup:
       surface-elevated-3/4 → step further with surface-elevated-2 + a
         hairline stroke; the system separates by brightness, not by
         inventing more elevation steps.
       surface-deep / surface-scrim → surface-default (#010304) + opacity.
       surface-hover        → white-6 / white-15 action-tertiary surfaces.
       surface-selected     → --orange-15 (selected/brand tint).
       surface-input-hover  → surface-input lightened in :hover. */
  --surface-elevated-3:   rgb(48, 52, 54);
  --surface-elevated-4:   rgb(64, 69, 73);
  --surface-scrim:        rgba( 1,  3,  4, 0.8);
  --surface-deep:         rgb( 1,  3,  4);
  --surface-hover:        rgba(255,255,255,0.04);
  --surface-selected:     rgba(255,120,23,0.08);
  --surface-input-hover:  rgba(255,255,255,0.10);

  /* ─── SEMANTIC — STROKES ─────────────────────────────────── */
  --stroke-default:         rgba(255,255,255,0.06);
  --stroke-subtle:          rgba(255,255,255,0.15);
  --stroke-strong:          rgba(255,255,255,0.5);
  --stroke-primary:         rgb(16,198,107);
  --stroke-primary-muted:   rgba(16,198,107,0.25);
  --stroke-primary-subtle:  rgba(16,198,107,0.15);
  --stroke-primary-invisible: rgba(16,198,107,0);
  --stroke-negative:        rgb(248,68,95);
  --stroke-negative-muted:  rgba(248,68,95,0.25);
  --stroke-negative-subtle: rgba(248,68,95,0.15);
  --stroke-negative-invisible: rgba(248,68,95,0);

  /* ─── GRADIENTS ──────────────────────────────────────────── */
  --gradient-brand:    linear-gradient(180deg, rgba(255,120,23,0.15) 0%, rgba(255,120,23,0) 100%);
  --gradient-positive: linear-gradient(180deg, rgba(16,198,107,0.15) 0%, rgba(16,198,107,0) 100%);
  --gradient-negative: linear-gradient(180deg, rgba(248,68,95,0.15)  0%, rgba(248,68,95,0)  100%);
  --gradient-button-primary: linear-gradient(65deg, var(--surface-action-primary) 0%, var(--surface-action-primary-hover) 100%);

  /* ─── TYPEFACES ──────────────────────────────────────────── */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* slash zeroes enabled */
  --font-display: "APK Protocol", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ─── BRAND 2026 — TYPE SCALE ──────────────────────────────
     The marketing scale from the GTE Brand 2026 boards. It sits above the
     product scale rather than restyling it: headlines start where product
     headings stop (20px) and run to 140px; body starts where product body
     stops (14px) and runs to 20px. Headlines are APK Protocol SemiBold,
     body is Inter Regular, mono is JetBrains Mono Medium set in caps.
     Product chrome keeps the density-tiered scale below; these are for
     marketing, editorial and the hub's own headings. */
  --brand-heading-weight: 600;
  --brand-h0-size: 140px; --brand-h0-leading: 90%;
  --brand-h1-size:  88px; --brand-h1-leading: 90%;
  --brand-h2-size:  76px; --brand-h2-leading: 90%;
  --brand-h3-size:  64px; --brand-h3-leading: 90%;
  --brand-h4-size:  52px; --brand-h4-leading: 90%;
  --brand-h5-size:  40px; --brand-h5-leading: 90%;
  --brand-h6-size:  32px; --brand-h6-leading: 105%;
  --brand-h7-size:  24px; --brand-h7-leading: 110%;
  --brand-h8-size:  20px; --brand-h8-leading: 110%;

  --brand-body-weight: 400;
  --brand-b1-size: 20px; --brand-b1-leading: 140%;
  --brand-b2-size: 18px; --brand-b2-leading: 140%;
  --brand-b3-size: 16px; --brand-b3-leading: 140%;
  --brand-b4-size: 14px; --brand-b4-leading: 140%;

  --brand-mono-weight: 500;
  --brand-mono-tracking: 0.08em; /* caps labels are tracked open; the boards' exact value is not exported */
  --brand-m1-size: 14px; --brand-m1-leading: 100%;
  --brand-m2-size: 12px; --brand-m2-leading: 100%;
  --brand-m3-size: 10px; --brand-m3-leading: 100%;

  /* ─── BRAND 2026 — PALETTE ─────────────────────────────────
     Seven named groups, each ordered light → dark as on the board. This is
     a marketing palette layered beside the product tokens, not a revision
     of them: three values already exist in the product ramps and alias
     them; the rest are new. It carries no red and no mint green — the
     trading semantics (positive / negative) stay product-only, and the
     Signal limes must never stand in for them. */
  --brand-ignition-1: #ff7817; /* Brand Orange — identical to --orange-600 / --accent */
  --brand-ignition-2: #ff5e11; /* Marketing */
  --brand-ignition-3: #d94400;
  --brand-ignition-4: #8f2a00;

  --brand-carbon-1: #1c1e24;
  --brand-carbon-2: #101213; /* Dark BG — identical to --black-900 / --surface-elevated-1 */
  --brand-carbon-3: #0a0a0c; /* Dark Text */

  --brand-paper-1: #ffffff; /* Light Text — identical to --white-200 */
  --brand-paper-2: #f4f2ef; /* Light BG (warm; the product light theme is neutral) */
  --brand-paper-3: #ededea;

  --brand-alloy-1: #dcddde;
  --brand-alloy-2: #b3b7bb;

  --brand-concrete-1: #7c828e;
  --brand-concrete-2: #2b2f38;

  --brand-gulf-1: #e4eff8;
  --brand-gulf-2: #c2d9ec;
  --brand-gulf-3: #9cc1dd;
  --brand-gulf-4: #5e87a8;
  --brand-gulf-5: #273b4d;

  --brand-signal-1: #ffd400;
  --brand-signal-2: #b4e227;
  --brand-signal-3: #8cb414;

  /* Named roles from the board, for prose and prompts. */
  --brand-orange:           var(--brand-ignition-1);
  --brand-marketing-orange: var(--brand-ignition-2);
  --brand-dark-bg:          var(--brand-carbon-2);
  --brand-dark-text:        var(--brand-carbon-3);
  --brand-light-bg:         var(--brand-paper-2);
  --brand-light-text:       var(--brand-paper-1);

  /* ─── MARKETING 2026 — THE LANDING ─────────────────────────
     From liquid-labs-inc/gte-landing-site (tokens.css, landing.css).
     Marketing only; the product canvas stays --surface-elevated-1. */
  --page-rgb: 11 13 14;
  --page: rgb(var(--page-rgb));  /* the marketing canvas: gte-web's trade page base */
  --band-light: #e2e3e1;         /* the one light band; never white or paper */

  /* Accent is the only action colour. Ember is the art's orange: ASCII,
     illustration, the Edge E mark, an active list number. Never on UI. */
  --brand-ember:        var(--brand-ignition-2);
  --brand-ember-deep:   #e8430c;
  --brand-ember-shadow: #8f2606;

  --ascii-dot:  rgb(40,40,40);    /* the full stop in every blank cell */
  --ascii-off:  #373739;          /* the switched-off field behind the EDGE cards */
  --ascii-dark: rgb(15,13,12);    /* luminance ramp, darkest stop */
  --ascii-hot:  rgb(240,226,214); /* luminance ramp, white-hot core */

  --frame:  1520px;
  --gutter: clamp(20px, 4vw, 56px);
  --inset:  max(var(--gutter), (100% - var(--frame)) / 2);

  /* A dark product tile on the light band: a black ring and three soft drops. */
  --shadow-pane: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.12),
                 0 16px 32px -8px rgba(0,0,0,0.22), 0 40px 80px -24px rgba(0,0,0,0.28);

  /* Motion: the landing's only durations and curves. Animate transform
     and opacity; colour may transition at --dur-fast. */
  --dur-press:   120ms;
  --dur-fast:    200ms;
  --dur-base:    280ms;
  --dur-slow:    440ms;
  --dur-story:   900ms;          /* scroll reveals; marketing only */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-linear: linear;         /* ambient loops only */
  --stagger:     60ms;
  --rise:        0.5em;

  /* ─── RADII (Supernova) ──────────────────────────────────── */
  --radius-small:         4px;
  --radius-regular:       8px;
  --radius-button:        8px;
  --radius-complementary: 12px;
  --radius-large:         16px;

  /* ─── SPACING (Supernova) ────────────────────────────────── */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    12px;
  --space-lg:    16px;
  --space-xl:    24px;
  --space-xxl:   32px;
  --space-huge:  48px;

  /* ─── ELEVATION ──────────────────────────────────────────── */
  --shadow-button:        0 2px 12px var(--orange-40);
  --shadow-button-hover:  0 2px 16px var(--orange-40);
  --shadow-button-over:   0 4px 8px var(--black-800);
  --shadow-overlay:       0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px var(--stroke-subtle);
  --shadow-card:          0 1px 0 var(--stroke-default);

  /* ─── LAYOUT (Supernova) ─────────────────────────────────── */
  --sidebar-width: 80px;
  --header-height: 48px;
  --banner-height: 28px;
  --footer-height: 56px;

  /* ─── 23.43° AXIAL TILT (brand geometry) ─────────────────────
     GTE's signature slant. Shipped in product on the active-tab /
     sidebar indicator and in marketing grid backgrounds. The slant
     offset is derived from the chrome height, never hand-tuned:
     --tab-slant-px = --tab-bar-h × tan(23.43°). See the 23.43° section
     in README.md for where it is allowed and at what scale. */
  --axial-tilt:   23.43deg;
  --tab-bar-h:    3rem; /* repo wins: density.css */
  --tab-slant-px: 20.8px; /* repo wins: density.css */
}

/* ══════════════════════════════════════════════════════════════
   DENSITY TIERS — type sizes are NOT fixed in the real app.
   Mirrors gte-web `src/shared/styles/density.css`. Two tiers:
   a denser baseline on :root for everything below the `widescreen`
   breakpoint (1512px) — this is what MOST screens render — and the
   full Supernova "Desktop" snapshot at 1512px and above. The .h1-.h6, .p1-.p3,
   .mono-1-.mono-4 and .btn-1-.btn-3 classes below consume these variables, so every text
   surface responds without per-element changes.

   DEFAULT TO THE BASELINE TIER. Body text is 11px (.p3 / .mono-3),
   not 12px, on the overwhelming majority of viewports. Only design
   for the 1512+ tier when explicitly targeting widescreen.
   ══════════════════════════════════════════════════════════ */
:root {
  /* baseline tier (< 1512px) — one step down from Supernova */
  --text-heading-1-size: 42px;  --text-heading-1-tracking: -0.84px;
  --text-heading-2-size: 32px;  --text-heading-2-tracking: -0.64px;
  --text-heading-3-size: 25px;  --text-heading-3-tracking: -0.5px;
  --text-heading-4-size: 21px;  --text-heading-4-tracking: -0.42px;
  --text-heading-5-size: 18px;  --text-heading-5-tracking: -0.36px;
  --text-heading-6-size: 16px;  --text-heading-6-tracking: -0.32px;

  --text-paragraph-1-size: 14px; --text-paragraph-1-tracking: 0.14px;
  --text-paragraph-2-size: 13px; --text-paragraph-2-tracking: 0.26px;
  --text-paragraph-3-size: 11px; --text-paragraph-3-tracking: 0.44px;  /* dominant body size */

  --text-mono-1-size: 18px; --text-mono-1-tracking: -0.36px;
  --text-mono-2-size: 14px; --text-mono-2-tracking: 0.42px;
  --text-mono-3-size: 11px; --text-mono-3-tracking: 0.33px;            /* dominant numeric size */
  --text-mono-4-size: 10px; --text-mono-4-tracking: 0.27px;
  --text-mono-line-height: 16px;  /* single line-height for ALL mono sizes — see note on .mono-1 */

  --text-button-1-size: 12px; --text-button-1-tracking: 0.24px;
  --text-button-2-size: 11px; --text-button-2-tracking: 0.22px;
  --text-button-3-size: 11px; --text-button-3-tracking: 0.22px;
}

@media (min-width: 1512px) {
  :root {
    /* widescreen+ : full Supernova desktop snapshot */
    --tab-bar-h: 3rem; /* repo wins: density.css */ --tab-slant-px: 20.8px; /* repo wins: density.css */

    --text-heading-1-size: 48px; --text-heading-1-tracking: -0.96px;
    --text-heading-2-size: 36px; --text-heading-2-tracking: -0.72px;
    --text-heading-3-size: 28px; --text-heading-3-tracking: -0.56px;
    --text-heading-4-size: 24px; --text-heading-4-tracking: -0.48px;
    --text-heading-5-size: 20px; --text-heading-5-tracking: -0.4px;
    --text-heading-6-size: 18px; --text-heading-6-tracking: -0.36px;

    --text-paragraph-1-size: 15px; --text-paragraph-1-tracking: 0.15px;
    --text-paragraph-2-size: 14px; --text-paragraph-2-tracking: 0.28px;
    --text-paragraph-3-size: 12px; --text-paragraph-3-tracking: 0.48px;

    --text-mono-1-size: 20px; --text-mono-1-tracking: -0.4px;
    --text-mono-2-size: 15px; --text-mono-2-tracking: 0.45px;
    --text-mono-3-size: 12px; --text-mono-3-tracking: 0.36px;
    --text-mono-4-size: 11px; --text-mono-4-tracking: 0.3px;

    --text-button-1-size: 13px; --text-button-1-tracking: 0.26px;
    --text-button-2-size: 12px; --text-button-2-tracking: 0.24px;
    --text-button-3-size: 11px; --text-button-3-tracking: 0.22px;
  }
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY — classes mirror gte-web's `.typography-*`
   ══════════════════════════════════════════════════════════ */

html, body { font-family: var(--font-sans); background: var(--surface-elevated-1); color: var(--text-high); font-feature-settings: "zero" 1; }

/* Light-mode opt-in. Apply `data-theme="light"` to <html> or a scoped
   container to flip surface tokens — text tokens stay semantic via
   their own overrides below. */
[data-theme="light"] {
  --surface-default:      rgb(250,250,250);                /* grey-250 — reserved */
  --surface-elevated-1:   rgb(240,240,240);                /* grey-240 — canvas */
  --surface-elevated-2:   rgb(246,246,246);                /* grey-246 — cards */
  --surface-overlay:      rgb(244,244,244);                /* grey-244 — popovers */
  --surface-input:        rgba(1,3,4,0.06);                /* black-6 */

  --surface-action-tertiary:        rgba(1,3,4,0.06);      /* black-6 */
  --surface-action-tertiary-hover:  rgba(1,3,4,0.12);      /* black-12 */

  --text-high:            rgb(1,3,4);                      /* black-900 — primary */
  --text-mid:             rgb(84,87,90);                   /* white-1000 — secondary */
  --text-low:             rgb(106,110,113);                /* white-800 — tertiary */
  --text-positive:        rgb(0, 138, 69);                 /* green-1000 — darkest green, for light bg */
  --text-negative:        rgb(217, 18, 48);                /* red-1000 — darkest red, for light bg */
  --text-accent:          rgb(189, 79, 0);                 /* orange-1000 — orange TEXT darkened for contrast on light */
  --text-action-positive-hover: rgb(0, 138, 69);           /* green-1000 — already the darkest */
  --text-action-negative-hover: rgb(217, 18, 48);          /* red-1000 — already the darkest */
  --text-action-tertiary:       rgb(84, 87, 90);           /* white-1000 */
  --text-action-tertiary-hover: rgb(1, 3, 4);              /* black-1000 — darken on hover */

  --stroke-default:       rgba(1,3,4,0.08);
  --stroke-subtle:        rgba(1,3,4,0.15);
  --stroke-strong:        rgba(1,3,4,0.5);

  background: var(--surface-elevated-1);
  color: var(--text-high);
}

/* Brand headlines — APK Protocol SemiBold at the Brand 2026 scale. Marketing,
   editorial and hub headings only; product chrome stays on .h1–.h6 below.
   The two former display sizes (64, 40) map onto H3 and H5, so .display-1
   and .display-2 keep working and now render in the brand face. */
.brand-h0, .brand-h1, .brand-h2, .brand-h3, .brand-h4, .brand-h5, .brand-h6, .brand-h7, .brand-h8,
.display-1, .display-2 {
  font-family: var(--font-display);
  font-weight: var(--brand-heading-weight);
  letter-spacing: -0.02em;
}
.brand-h0 { font-size: var(--brand-h0-size); line-height: var(--brand-h0-leading); }
.brand-h1 { font-size: var(--brand-h1-size); line-height: var(--brand-h1-leading); }
.brand-h2 { font-size: var(--brand-h2-size); line-height: var(--brand-h2-leading); }
.brand-h3, .display-1 { font-size: var(--brand-h3-size); line-height: var(--brand-h3-leading); }
.brand-h4 { font-size: var(--brand-h4-size); line-height: var(--brand-h4-leading); }
.brand-h5, .display-2 { font-size: var(--brand-h5-size); line-height: var(--brand-h5-leading); }
.brand-h6 { font-size: var(--brand-h6-size); line-height: var(--brand-h6-leading); letter-spacing: -0.01em; }
.brand-h7 { font-size: var(--brand-h7-size); line-height: var(--brand-h7-leading); letter-spacing: -0.01em; }
.brand-h8 { font-size: var(--brand-h8-size); line-height: var(--brand-h8-leading); letter-spacing: -0.01em; }

/* Brand body — Inter Regular, 140% leading, larger than any product body size. */
.brand-b1, .brand-b2, .brand-b3, .brand-b4 { font-family: var(--font-sans); font-weight: var(--brand-body-weight); }
.brand-b1 { font-size: var(--brand-b1-size); line-height: var(--brand-b1-leading); }
.brand-b2 { font-size: var(--brand-b2-size); line-height: var(--brand-b2-leading); }
.brand-b3 { font-size: var(--brand-b3-size); line-height: var(--brand-b3-leading); }
.brand-b4 { font-size: var(--brand-b4-size); line-height: var(--brand-b4-leading); }

/* Brand mono — JetBrains Mono Medium, caps, tracked. A marketing-only label
   treatment: product mono stays Regular, sentence case, on a 16px leading. */
.brand-m1, .brand-m2, .brand-m3 {
  font-family: var(--font-mono);
  font-weight: var(--brand-mono-weight);
  letter-spacing: var(--brand-mono-tracking);
  text-transform: uppercase;
}
.brand-m1 { font-size: var(--brand-m1-size); line-height: var(--brand-m1-leading); }
.brand-m2 { font-size: var(--brand-m2-size); line-height: var(--brand-m2-leading); }
.brand-m3 { font-size: var(--brand-m3-size); line-height: var(--brand-m3-leading); }

/* Two-tone heading: the second line of a two-line brand headline. */
.brand-dim { color: var(--text-mid); }

/* The lede under a marketing heading. Wrap its key phrases in <strong>. */
.brand-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--text-mid);
  max-width: 25em;
}
.brand-lede strong { font-weight: inherit; color: var(--text-high); }

/* Marketing canvas. The page colour, not --surface-elevated-1. */
.brand-page { background: var(--page); color: var(--text-high); }

/* The light band: the page tokens flipped onto light grey. Panels step
   darker than the band. Product tiles inside stay dark: wrap them in
   .dark-scope and give them --shadow-pane. Not data-theme="light", whose
   #f0f0f0 ramp belongs to the product's opt-in light mode. */
.band-light {
  --page-rgb: 226 227 225;
  --page: var(--band-light);
  --surface-elevated-1: #d6d7d5;
  --surface-elevated-2: #cacbc9;
  --surface-input:      rgba(1,3,4,0.08);
  --surface-action-tertiary:       rgba(1,3,4,0.08);
  --surface-action-tertiary-hover: rgba(1,3,4,0.15);
  --text-high: #0b0d0e;
  --text-mid:  #5d6164;
  --text-low:  #8c9093;
  --text-accent: rgb(189,79,0);
  --text-action-tertiary:       rgb(84,87,90);
  --text-action-tertiary-hover: rgb(1,3,4);
  --stroke-default: rgba(11,13,14,0.1);
  --stroke-subtle:  rgba(11,13,14,0.15);
  --stroke-strong:  rgba(11,13,14,0.5);
  background: var(--page);
  color: var(--text-high);
}

/* Headings — Inter 700. Sizes come from the density tiers above
   (baseline < 1512px, Supernova at 1512+). Reserve .h1/.h2 for hero /
   landing / empty-state moments — never product chrome. */
.h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-heading-1-size); line-height: 100%; letter-spacing: var(--text-heading-1-tracking); }
.h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-heading-2-size); line-height: 100%; letter-spacing: var(--text-heading-2-tracking); }
.h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-heading-3-size); line-height: 100%; letter-spacing: var(--text-heading-3-tracking); }
.h4 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-heading-4-size); line-height: 100%; letter-spacing: var(--text-heading-4-tracking); }
.h5 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-heading-5-size); line-height: 100%; letter-spacing: var(--text-heading-5-tracking); }
.h6 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-heading-6-size); line-height: 100%; letter-spacing: var(--text-heading-6-tracking); }

/* Paragraphs — Inter 400 / 600. .p3 is the default body size in product. */
.p1      { font-size: var(--text-paragraph-1-size); line-height: 160%; letter-spacing: var(--text-paragraph-1-tracking); font-weight: 400; }
.p1-bold { font-size: var(--text-paragraph-1-size); line-height: 160%; letter-spacing: var(--text-paragraph-1-tracking); font-weight: 600; }
.p2      { font-size: var(--text-paragraph-2-size); line-height: 160%; letter-spacing: var(--text-paragraph-2-tracking); font-weight: 400; }
.p2-bold { font-size: var(--text-paragraph-2-size); line-height: 160%; letter-spacing: var(--text-paragraph-2-tracking); font-weight: 600; }
.p3      { font-size: var(--text-paragraph-3-size); line-height: 140%; letter-spacing: var(--text-paragraph-3-tracking); font-weight: 400; }
.p3-bold { font-size: var(--text-paragraph-3-size); line-height: 140%; letter-spacing: var(--text-paragraph-3-tracking); font-weight: 600; }

/* Mono — JetBrains Mono 400 (numbers, prices, hashes, timestamps).
   .mono-3 is the default numeric size in product. NOTE: all mono sizes
   share one 16px line-height by design — so .mono-1 (18–20px) is
   INTENTIONALLY set tighter than its font-size, for single-line big-number
   readouts (price headers, PnL). It is faithful to the repo, not a bug.
   Only use .mono-1 for one-line numeric display; never for wrapping text. */
.mono-1 { font-family: var(--font-mono); font-size: var(--text-mono-1-size); line-height: var(--text-mono-line-height); letter-spacing: var(--text-mono-1-tracking); }
.mono-2 { font-family: var(--font-mono); font-size: var(--text-mono-2-size); line-height: var(--text-mono-line-height); letter-spacing: var(--text-mono-2-tracking); }
.mono-3 { font-family: var(--font-mono); font-size: var(--text-mono-3-size); line-height: var(--text-mono-line-height); letter-spacing: var(--text-mono-3-tracking); }
.mono-4 { font-family: var(--font-mono); font-size: var(--text-mono-4-size); line-height: var(--text-mono-line-height); letter-spacing: var(--text-mono-4-tracking); }

/* Buttons */
.btn-1 { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-button-1-size); line-height: 100%; letter-spacing: var(--text-button-1-tracking); }
.btn-2 { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-button-2-size); line-height: 100%; letter-spacing: var(--text-button-2-tracking); }
.btn-3 { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-button-3-size); line-height: 100%; letter-spacing: var(--text-button-3-tracking); }

/* Utility: flash on change for live numbers */
@keyframes alpha-flash {
  0%,15% { background-color: var(--surface-elevated-2); }
  100%   { background-color: transparent; }
}
.alpha-highlight { animation: alpha-flash 1.5s ease-out; }

/* Tabular numerals + slashed zero — always on for mono (GTE renders slashed
   zeros everywhere numbers appear; never plain 0 in JetBrains Mono). */
.mono-1, .mono-2, .mono-3, .mono-4 {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "zero" 1, "tnum" 1;
}

/* ══════════════════════════════════════════════════════════════
   ATOMS — base classes for the locked components, lifted from the
   skill's preview/*.html copy-sources (buttons, badges, inputs, cards,
   tabs). Enough for an agent outside the repo to produce recognisable
   atoms without any markup from the monorepo. Structure and states
   mirror gte-design-system/src/components/*; do not restyle here —
   fix the source and re-run the build.
   ══════════════════════════════════════════════════════════ */

/* ─── Button ─────────────────────────────────────────────────
   .btn + one variant (.primary .secondary .tertiary .ghost .positive .negative)
   + optional size (.sm 28px · default 32px · .lg 40px — marketing only)
   + optional .iconly (square, 16px glyph, needs aria-label). */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-regular);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-button-1-size);
  line-height: 100%;
  letter-spacing: var(--text-button-1-tracking);
  height: 32px;
  padding: 0 16px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-color, var(--text-high));
  background: var(--btn-bg, transparent);
  box-shadow: 0 2px 12px 0 var(--shadow-color, transparent);
  transition: filter .2s ease-out, background .2s ease-out, color .2s ease-out, box-shadow .2s
    ease-out;
}
.btn.sm {
  height: 28px;
  padding: 0 12px;
}
.btn.lg {
  height: 40px;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    var(--border-from, transparent) 0%,
    var(--border-to, transparent) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
[data-theme="light"] .btn::before {
  background: linear-gradient(
    to top,
    var(--border-from, transparent) 0%,
    var(--border-to, transparent) 100%
  );
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 4px 8px 0 var(--shadow-over, transparent);
}
.btn svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: none;
}
.btn.iconly {
  padding: 0;
  width: 32px;
}
.btn.iconly.sm {
  width: 28px;
}
.btn.iconly.lg {
  width: 40px;
}
.btn.primary {
  --btn-bg: linear-gradient(
    65deg,
    var(--surface-action-primary) 0%,
    var(--surface-action-primary-hover) 100%
  );
  /* White on every theme: gte-web's Button never flips the label on orange. */
  --text-color: var(--white-200);
  --border-from: var(--stroke-subtle);
  --border-to: var(--stroke-subtle);
  --shadow-color: var(--orange-40);
  --shadow-over: var(--black-800);
}
.btn.primary:hover {
  filter: brightness(1.2);
  box-shadow: 0 2px 16px 0 var(--orange-40);
}
.btn.secondary {
  --btn-bg: var(--surface-action-secondary);
  --text-color: var(--accent-light);
  --border-from: var(--accent-muted);
  --border-to: var(--accent-transparent);
}
.btn.secondary:hover {
  --btn-bg: var(--surface-action-secondary-hover);
}
.btn.tertiary {
  --btn-bg: var(--surface-action-tertiary);
  --text-color: var(--text-action-tertiary);
  --border-from: var(--stroke-default);
  --border-to: var(--white-0);
}
.btn.tertiary:hover {
  --btn-bg: var(--surface-action-tertiary-hover);
  --text-color: var(--text-action-tertiary-hover);
}
.btn.ghost {
  --btn-bg: transparent;
  --text-color: var(--text-action-tertiary);
  box-shadow: none;
}
.btn.ghost::before,
.btn.ghost::after {
  display: none;
}
.btn.ghost:hover {
  --btn-bg: transparent;
  --text-color: var(--text-action-tertiary-hover);
}
.btn.positive {
  --btn-bg: linear-gradient(
    65deg,
    var(--surface-action-positive) 0%,
    var(--surface-action-positive-hover) 100%
  );
  --text-color: var(--text-high);
  --border-from: var(--stroke-subtle);
  --border-to: var(--stroke-subtle);
  --shadow-color: var(--positive-muted);
  --shadow-over: var(--black-800);
}
.btn.positive:hover {
  filter: brightness(1.2);
}
.btn.negative {
  --btn-bg: linear-gradient(
    65deg,
    var(--surface-action-negative) 0%,
    var(--surface-action-negative-hover) 100%
  );
  --text-color: var(--text-high);
  --border-from: var(--stroke-subtle);
  --border-to: var(--stroke-subtle);
  --shadow-color: var(--negative-muted);
  --shadow-over: var(--black-800);
}
.btn.negative:hover {
  filter: brightness(1.2);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:focus-visible {
  outline: 1px solid var(--ring, var(--accent));
  outline-offset: 2px;
}
.btn.secondary:focus-visible {
  --ring: var(--accent-light);
}
.btn.tertiary:focus-visible,
.btn.ghost:focus-visible {
  --ring: var(--text-low);
}
.btn.positive:focus-visible {
  --ring: var(--green-600);
}
.btn.negative:focus-visible {
  --ring: var(--negative);
}
.btn.block {
  width: 100%;
}
/* A button rendered as a link is still a button: no underline, ever. */
a.btn,
a.btn:hover {
  text-decoration: none;
}

/* ─── Badge / pill ───────────────────────────────────────────
   .badge + variant (.primary .secondary .positive .negative) + optional
   .sm (default in product) or .count (square 20×20, mono, slashed zero).
   Border-only, never filled. Always inline next to other content. */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid;
  border-radius: var(--radius-regular);
  padding: 4px 8px;
  font-family: var(--font-sans);
  font-size: var(--text-paragraph-3-size);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--text-paragraph-3-tracking);
  white-space: nowrap;
}
.badge.sm {
  padding: 0 4px;
  border-radius: var(--radius-small);
}
.badge.count {
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: var(--radius-regular);
  line-height: 1;
  letter-spacing: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "zero" 1, "tnum" 1;
}
.badge.primary {
  border-color: var(--accent-muted);
  color: var(--accent-light);
}
.badge.secondary {
  border-color: var(--stroke-subtle);
  color: var(--text-mid);
}
.badge.positive {
  border-color: var(--positive-muted);
  color: var(--positive);
}
.badge.negative {
  border-color: var(--negative-muted);
  color: var(--negative);
}
.badge svg {
  width: 12px;
  height: 12px;
}

/* ─── Input ──────────────────────────────────────────────────
   .inp wraps an <input>. Inter, even for numbers. Border transparent →
   hover stroke-subtle → focus stroke-strong → .err stroke-negative-muted. */
.inp {
  display: flex;
  align-items: center;
  height: 32px;
  border-radius: var(--radius-regular);
  background: var(--surface-input);
  border: 1px solid transparent;
  padding: 0 8px;
  font-family: var(--font-sans);
  font-size: var(--text-paragraph-2-size);
  letter-spacing: var(--text-paragraph-2-tracking);
  color: var(--text-high);
  transition: border-color .1s;
}
.inp input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.inp input::placeholder {
  color: var(--text-low);
  transition: color .1s;
}
.inp:hover {
  border-color: var(--stroke-subtle);
}
.inp:hover input::placeholder,
.inp:focus-within input::placeholder {
  color: var(--text-mid);
}
.inp:focus-within {
  border-color: var(--stroke-strong);
}
.inp.err {
  border-color: var(--stroke-negative-muted);
}
.inp .suf {
  margin-left: auto;
  color: var(--text-mid);
}
.inp-error {
  color: var(--text-negative);
  font-size: var(--text-paragraph-3-size);
  line-height: 140%;
  margin-top: 4px;
}

/* ─── Card ───────────────────────────────────────────────────
   .card on the elevated-1 canvas steps up to elevated-2. Borderless by
   default; .bordered opts into a stroke-subtle edge. p16 throughout. */
.card {
  background: var(--surface-elevated-2);
  border-radius: var(--radius-regular);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}
.card.bordered {
  border: 1px solid var(--stroke-subtle);
}
.card > .hd {
  padding: 16px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-button-1-size);
  line-height: 100%;
  letter-spacing: var(--text-button-1-tracking);
}
.card > .ct {
  padding: 16px;
  color: var(--text-mid);
  font-size: var(--text-paragraph-3-size);
  line-height: 140%;
  letter-spacing: var(--text-paragraph-3-tracking);
}
.card > .hd + .ct {
  padding-top: 0;
}
.card > .ft {
  padding: 16px;
  padding-top: 0;
  display: flex;
  gap: 8px;
}

/* ─── Tabs (the 23.43° HeaderTab) ────────────────────────────
   .tabbar (transparent, height var(--tab-bar-h)) glued above a .tabblock.
   Only the .active tab is filled; the fill is a flat elevated-2
   parallelogram whose slant is derived from the bar height. */
.tabbar {
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--tab-bar-h);
}
.htab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-paragraph-3-size);
  font-weight: 400;
  letter-spacing: var(--text-paragraph-3-tracking);
  color: var(--text-low);
  transition: color .15s;
}
.htab + .htab {
  margin-left: -8px;
}
.htab:hover {
  color: var(--text-mid);
}
.htab.active {
  color: var(--text-high);
}
.htab.active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--surface-elevated-2);
  clip-path: polygon(var(--tab-slant-px) 0, 100% 0, calc(100% - var(--tab-slant-px)) 100%, 0 100%);
}
.htab > * {
  position: relative;
  z-index: 1;
}
.htab .lab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.htab.active .badge.count {
  border-color: var(--accent-muted);
  color: var(--accent-light);
}
.tabblock {
  background: linear-gradient(180deg, var(--surface-elevated-2) 0%, var(--surface-elevated-1) 100%);
}

/* ─── Dark scope ─────────────────────────────────────────────
   Wrap a product mockup placed on a light marketing section so it keeps
   dark tokens. Product UI is dark, even inside a light page. */
.dark-scope {
  --page-rgb: 11 13 14;
  --page: rgb(11, 13, 14);
  --surface-default: rgb(1, 3, 4);
  --surface-elevated-1: rgb(16, 18, 19);
  --surface-elevated-2: rgb(24, 26, 27);
  --surface-overlay: rgb(24, 26, 27);
  --surface-input: rgba(255, 255, 255, 0.06);
  --surface-action-tertiary: rgba(255, 255, 255, 0.06);
  --surface-action-tertiary-hover: rgba(255, 255, 255, 0.15);
  --text-high: rgb(255, 255, 255);
  --text-mid: rgb(166, 167, 168);
  --text-low: rgb(106, 110, 113);
  --text-positive: rgb(46, 232, 139);
  --text-negative: rgb(255, 102, 125);
  --text-accent: rgb(255, 147, 69);
  --text-action-tertiary: rgb(166, 167, 168);
  --text-action-tertiary-hover: rgb(211, 212, 212);
  --stroke-default: rgba(255, 255, 255, 0.06);
  --stroke-subtle: rgba(255, 255, 255, 0.15);
  --stroke-strong: rgba(255, 255, 255, 0.5);
  background: var(--surface-elevated-1);
  color: var(--text-high);
}