/* kg-tokens.css -- the Kurdography "Bazaar Ledger" token sheet (UI rebuild, Phase 0).
 *
 * Role: the only sheet that defines the palette besides theme.css, until Phase 7
 * retires theme.css. Linked AFTER theme.css and components.css on every page, so
 * every legacy token name listed in the alias block below is re-valued here.
 *
 * Three blocks:
 *   :root                       paper (light) -- design-system names, type stacks,
 *                               motion, the z-index ladder and the compat aliases
 *   :root[data-theme="dark"]    ink (dark) palette
 *   :root[data-theme="system"]  the same ink palette under prefers-color-scheme: dark,
 *                               a byte-identical copy of the dark block body
 *
 * Breakpoints (custom properties cannot drive media queries, so they live here as
 * documentation; every kg-*.css sheet uses exactly these five):
 *   360    narrowest phone the layouts are checked at
 *   720    phone website: the bottom bar shows at 720 and below
 *   900    drawer + sub-rail layout at 900 and below
 *   1100   mid desktop step
 *   1240   rail + TOP_NAV from 1240 up
 * Two exceptions, in kg-dash.css only (Phase 1 ruling R37, widened by the final fix wave): at 480 and below the
 * dashboard app bar drops its seal; at 400 and below an administrator's app-bar title steps down to 15px.
 */

:root {
  /* paper -- surfaces, text, hairlines */
  --paper: #F4ECDC;
  --paper-2: #ECE2CD;
  --paper-3: #E1D4BA;
  --ink: #1F1A15;
  --ink-2: #4B4238;
  --ink-3: #6B5F52;
  --hair: #B5A487;
  --hair-2: #8F7D5E;

  /* paper -- accents */
  --madder: #8F2A2D;
  --saffron: #C8911E;
  --saffron-text: #7A5410;
  --on-saffron: #1F1A15;
  --profit-soft: #D3E2CF;
  --loss-soft: #EDD3CE;
  --saffron-soft: #F0DFB2;

  /* kilim tiles: --kilim is the horizontal 32x16 tile, --kilim-v the vertical 16x32 */
  --kilim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M16 1 31 8 16 15 1 8Z' fill='%238F2A2D'/%3E%3Cpath d='M16 5 22 8 16 11 10 8Z' fill='%23F4ECDC'/%3E%3Cpath d='M16 6.5 19 8 16 9.5 13 8Z' fill='%23C8911E'/%3E%3Cpath d='M0 0h5L0 5ZM32 16h-5l5-5ZM0 16h5l-5-5ZM32 0h-5l5 5Z' fill='%231F1A15' opacity='.55'/%3E%3C/svg%3E");
  --kilim-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cpath d='M1 16 8 1 15 16 8 31Z' fill='%238F2A2D'/%3E%3Cpath d='M5 16 8 10 11 16 8 22Z' fill='%23F4ECDC'/%3E%3Cpath d='M6.5 16 8 13 9.5 16 8 19Z' fill='%23C8911E'/%3E%3Cpath d='M0 0v5L5 0ZM16 32v-5l-5 5ZM16 0v5l-5-5ZM0 32v-5l5 5Z' fill='%231F1A15' opacity='.55'/%3E%3C/svg%3E");

  /* type stacks */
  --f-display: "TC Rudaw", "TC NRT", "TC Vazirmatn", sans-serif;
  --f-body: "TC Vazirmatn", "TC Archivo", sans-serif;
  --f-latin: "TC Inter", system-ui, sans-serif;
  --f-num: "TC Archivo", "TC Inter", "TC Vazirmatn", sans-serif;

  /* motion */
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-num: 400ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-out: 200ms;

  /* z-index ladder */
  --z-ch-new: 60;
  --z-results: 65;
  --z-ptr: 66;
  --z-bars: 70;
  --z-dm: 80;
  --z-tg: 90;
  --z-modal-app: 92;
  --z-sheet: 95;
  --z-follows: 96;
  --z-veil: 200;
  --z-modal: 9000;
  --z-story: 9100;
  --z-action: 9300;
  --z-lrn: 9400;
  --z-viewer: 9600;
  --z-camera: 10000;
  --z-banner: 2147483000;
  --z-pop: 60;
  --z-hl: 97;
  --z-tg-calc: 1200;
  --z-tg-panel: 1300;
  --z-story-top: 9200;
  --z-react-set: 9500;
  --z-dialog: 9700;

  /* Phase 2: contrast decisions and the black stage */
  --focus: var(--saffron-text);
  --field-line: var(--hair-2);
  --badge: var(--madder);
  --on-badge: var(--paper);
  --stage: #000000;
  --on-stage: var(--paper);
  --on-stage-2: var(--paper-3);

  /* compatibility aliases: legacy token names re-valued onto the design-system names */
  --plane: var(--paper);
  --bg-base: var(--paper);
  --surface-1: var(--paper);
  --surface-2: var(--paper-2);
  --bg-surface: var(--paper-2);
  --surface-3: var(--paper-3);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --border-default: var(--hair);
  --primary: var(--saffron);
  --accent: var(--saffron);
  --action-ink: var(--on-saffron);
  --success: #1E6A35;
  --danger: #8A1E22;
  --critical: #8A1E22;
  --profit: var(--success);
  --loss: var(--danger);
  --neutral: var(--ink-3);
  --buy: var(--profit);
  --sell: var(--loss);
  --zero-line: var(--hair-2);
  --series-1: var(--ink);
  --series-2: var(--saffron);
  --series-3: var(--madder);
  --series-4: var(--profit);
  --series-5: var(--ink-3);
  --series-6: var(--saffron-text);
  --band-critical: var(--loss);
  --band-weak: var(--madder);
  --band-needs_improvement: var(--saffron);
  --band-good: var(--profit);
  --band-excellent: var(--saffron-text);
  /* the rest of theme.css's legacy colour names (ruling R29, Phase 1 Task 15). theme-appearance.css re-valued them in
     both themes until it left the pages; unaliased they kept theme.css's paper-theme literals in the ink theme too
     (#EAF0EE wells and #E1E8E6 hairlines as light boxes, #FFD60A fills, #10233A rings, #2B5C8A info, #A35400 warnings).
     Each points at a kg name, so the ink blocks below follow; the names theme.css derives from these (--surface-0,
     --border-faint, --primary-soft, --primary-ring, --danger-fill, --danger-soft, --success-soft, --grid, --axis)
     follow in turn. --bg-overlay is the one literal: --on-saffron (#1F1A15 in both themes) at 60%, a warm veil. */
  --bg-surface-2: var(--paper-2);
  --bg-elevated: var(--paper);
  --bg-overlay: rgba(31, 26, 21, 0.6);
  --border-subtle: var(--hair);
  --border-strong: var(--hair-2);
  --text-disabled: var(--ink-3);
  --disabled: var(--ink-3);
  --text-inverse: var(--paper);
  --accent-hover: var(--ink);
  --accent-subtle: var(--saffron-soft);
  --focus-ring: var(--saffron);
  --action-fill: var(--saffron);
  --action-fill-hover: var(--saffron);
  --success-fill: var(--profit);
  --critical-fill: var(--loss);
  --on-critical: var(--paper);
  --warning: var(--saffron-text);
  --warning-fill: var(--saffron);
  --info: var(--ink-2);
  --pending: var(--ink-3);
  --verified: var(--profit);
  --profit-subtle: var(--profit-soft);
  --loss-subtle: var(--loss-soft);
  --success-border: var(--profit);
  --danger-border: var(--loss);
  --warning-soft: var(--saffron-soft);
  --warning-border: var(--saffron);
  --info-soft: var(--paper-2);
  --info-border: var(--hair-2);
  --ai: var(--ink-3);
  --ai-soft: var(--paper-2);
  --ai-border: var(--hair-2);
  --control-h: 44px;
  --control-h-sm: 38px;
  --control-h-lg: 48px;
  --control-radius: 4px;
  --control-border: 1px;
  --control-px: 12px;
  --label-gap: 6px;
  --helper-gap: 4px;
  --sidebar-w: 84px;
  --sidebar-w-collapsed: 84px;
  --rail-w: 210px;
  --content-max: 1280px;
  --topbar-h: 60px;
  --mono: var(--f-num);
  --ig-bg: var(--paper);
  --capp-dark: 0;
  --capp-brand: var(--ink);
  --capp-cta: var(--saffron);
  --capp-accent: var(--saffron-text);
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --fs-hero: 44px;
  --fs-display: 36px;
  --fs-title: 26px;
  --fs-section: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-caption: 12px;
  --fs-micro: 11px;
  --fs-figure: 46px;
}

/* ink (dark): the palette flips, the aliases above follow because they are var() references on the same element */
:root[data-theme="dark"] {
  --paper: #17140F;
  --paper-2: #1F1B15;
  --paper-3: #2A241B;
  --ink: #EFE5D2;
  --ink-2: #CCBFA8;
  --ink-3: #9C8F7E;
  --hair: #514636;
  --hair-2: #6A5C48;
  --madder: #CD564F;
  --saffron: #E3AD3A;
  --saffron-text: #F0CB7A;
  --on-saffron: #1F1A15;
  --profit-soft: #1E2E20;
  --loss-soft: #3A1F1D;
  --saffron-soft: #3B2F14;
  --kilim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M16 1 31 8 16 15 1 8Z' fill='%23CD564F'/%3E%3Cpath d='M16 5 22 8 16 11 10 8Z' fill='%2317140F'/%3E%3Cpath d='M16 6.5 19 8 16 9.5 13 8Z' fill='%23E3AD3A'/%3E%3Cpath d='M0 0h5L0 5ZM32 16h-5l5-5ZM0 16h5l-5-5ZM32 0h-5l5 5Z' fill='%23EFE5D2' opacity='.45'/%3E%3C/svg%3E");
  --kilim-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cpath d='M1 16 8 1 15 16 8 31Z' fill='%23CD564F'/%3E%3Cpath d='M5 16 8 10 11 16 8 22Z' fill='%2317140F'/%3E%3Cpath d='M6.5 16 8 13 9.5 16 8 19Z' fill='%23E3AD3A'/%3E%3Cpath d='M0 0v5L5 0ZM16 32v-5l-5 5ZM16 0v5l-5-5ZM0 32v-5l5 5Z' fill='%23EFE5D2' opacity='.45'/%3E%3C/svg%3E");
  --success: #7EC285;
  --danger: #E0665E;
  --critical: #E0665E;
  --profit: var(--success);
  --loss: var(--danger);
  --buy: var(--profit);
  --sell: var(--loss);
  --capp-dark: 1;
  --field-line: var(--ink-3);
  --badge: var(--loss);
  --on-stage: var(--ink);
  --on-stage-2: var(--ink-2);
}

/* system = dark, byte-identical; test/kg-sheets.js and test/design-system.js compare */
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
  --paper: #17140F;
  --paper-2: #1F1B15;
  --paper-3: #2A241B;
  --ink: #EFE5D2;
  --ink-2: #CCBFA8;
  --ink-3: #9C8F7E;
  --hair: #514636;
  --hair-2: #6A5C48;
  --madder: #CD564F;
  --saffron: #E3AD3A;
  --saffron-text: #F0CB7A;
  --on-saffron: #1F1A15;
  --profit-soft: #1E2E20;
  --loss-soft: #3A1F1D;
  --saffron-soft: #3B2F14;
  --kilim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cpath d='M16 1 31 8 16 15 1 8Z' fill='%23CD564F'/%3E%3Cpath d='M16 5 22 8 16 11 10 8Z' fill='%2317140F'/%3E%3Cpath d='M16 6.5 19 8 16 9.5 13 8Z' fill='%23E3AD3A'/%3E%3Cpath d='M0 0h5L0 5ZM32 16h-5l5-5ZM0 16h5l-5-5ZM32 0h-5l5 5Z' fill='%23EFE5D2' opacity='.45'/%3E%3C/svg%3E");
  --kilim-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cpath d='M1 16 8 1 15 16 8 31Z' fill='%23CD564F'/%3E%3Cpath d='M5 16 8 10 11 16 8 22Z' fill='%2317140F'/%3E%3Cpath d='M6.5 16 8 13 9.5 16 8 19Z' fill='%23E3AD3A'/%3E%3Cpath d='M0 0v5L5 0ZM16 32v-5l-5 5ZM16 0v5l-5-5ZM0 32v-5l5 5Z' fill='%23EFE5D2' opacity='.45'/%3E%3C/svg%3E");
  --success: #7EC285;
  --danger: #E0665E;
  --critical: #E0665E;
  --profit: var(--success);
  --loss: var(--danger);
  --buy: var(--profit);
  --sell: var(--loss);
  --capp-dark: 1;
  --field-line: var(--ink-3);
  --badge: var(--loss);
  --on-stage: var(--ink);
  --on-stage-2: var(--ink-2);
}
}

/* Halo (2026-10-24): HALO-DESIGN.md §2-4, new names on every page */
/* Release 2.3.5 ("Halo 1"). The --h-* names are new and change no ledger name by themselves: the ledger reads them
   only inside the Halo scope, through the bridge below (html.tc-app, the app; html.kg-halo, the website's Community,
   set by community-mode.js). Light colours and every non-colour name here; the dark colours in the next block and its
   byte-identical system copy, as the ledger keeps its own. Literal hex and rgba only (Android WebView, minSdk 24). */
:root {
  /* §2.1 neutrals and surfaces */
  --h-canvas: #FFFFFF;
  --h-surface: #F5F6F8;
  --h-fill: #ECEEF1;
  --h-raised: #FFFFFF;
  --h-line: #E6E8EB;
  --h-line-strong: #D3D7DD;
  --h-field-line: #8A919C;
  --h-text: #0B0C0F;
  --h-text-2: #5E6571;
  --h-disabled: #8A919C;
  --h-scrim: rgba(0,0,0,.5);
  --h-stage: #000000;
  --h-on-stage: #FFFFFF;
  --h-on-stage-2: #C9CED6;
  --h-veil: rgba(0,0,0,.6);

  /* §2.2 the accent: B's blue */
  --h-accent: #0369A1;
  --h-on-accent: #FFFFFF;
  --h-accent-hover: #025A8A;
  --h-accent-soft: #E6F0F7;

  /* §2.3 the brand orange: the unseen story ring and the mark's tile only */
  --h-brand: #F26A10;

  /* §2.4 meaning colours, and the BUY / SELL pairs */
  --h-up: #047857;
  --h-down: #C81E3A;
  --h-up-soft: #E7F5EE;
  --h-down-soft: #FCEBEE;
  --h-alert: #E0243C;
  --h-on-alert: #FFFFFF;
  --h-warn: #B4480B;
  --h-buy-bg: #047857;
  --h-buy-fg: #FFFFFF;
  --h-sell-bg: #C81E3A;
  --h-sell-fg: #FFFFFF;

  /* §2.5 the price chip's inverse pair */
  --h-inverse: #0B0C0F;
  --h-on-inverse: #FFFFFF;
  --h-up-on-inverse: #4ADE9F;
  --h-down-on-inverse: #FF8A93;

  /* §2.6 placeholder avatars: one value in both themes */
  --h-av-1: #0F766E;
  --h-av-2: #1D4ED8;
  --h-av-3: #7C3AED;
  --h-av-4: #BE185D;
  --h-av-5: #C2410C;
  --h-av-6: #15803D;

  /* §3.1 families */
  --h-font: "TC Vazirmatn", "TC Inter", system-ui, sans-serif;
  --h-font-latin: "TC Inter", system-ui, sans-serif;
  --h-font-num: "TC Inter", "TC Vazirmatn", system-ui, sans-serif;

  /* §3.2 weights: three, never above 600 */
  --h-w-regular: 400;
  --h-w-medium: 500;
  --h-w-strong: 600;

  /* §3.3 the eight sizes */
  --h-t-meta: 12px;
  --h-t-small: 14px;
  --h-t-body: 16px;
  --h-t-lead: 18px;
  --h-t-title: 20px;
  --h-t-post: 24px;
  --h-t-figure: 28px;
  --h-t-hero: 32px;

  /* §4.1 spacing: 4 / 8 */
  --h-s-1: 4px;
  --h-s-2: 8px;
  --h-s-3: 12px;
  --h-s-4: 16px;
  --h-s-5: 24px;
  --h-s-6: 32px;
  --h-s-7: 48px;

  /* §4.2 radius */
  --h-r-sm: 8px;
  --h-r-md: 12px;
  --h-r-lg: 16px;
  --h-r-xl: 24px;
  --h-r-full: 999px;

  /* §4.3 elevation: the one shadow (light: alpha under .08) */
  --h-shadow: 0 4px 16px rgba(11,12,15,.07);

  /* §4.4 motion */
  --h-t-fast: 160ms;
  --h-t-base: 240ms;
  --h-t-out: 200ms;
  --h-ease: cubic-bezier(.2,.7,.2,1);
}

/* Halo dark: the soft near-black; every two-valued colour of §2 and the dark shadow (a top-edge highlight, never a glow) */
:root[data-theme="dark"] {
  --h-canvas: #0C1014;
  --h-surface: #13181E;
  --h-fill: #22282F;
  --h-raised: #1A1F26;
  --h-line: #242A31;
  --h-line-strong: #343B44;
  --h-field-line: #6B7380;
  --h-text: #F5F6F7;
  --h-text-2: #A3AAB4;
  --h-disabled: #6B7380;
  --h-scrim: rgba(0,0,0,.6);
  --h-stage: #000000;
  --h-on-stage: #FFFFFF;
  --h-on-stage-2: #C9CED6;
  --h-veil: rgba(0,0,0,.6);
  --h-accent: #3CD6FF;
  --h-on-accent: #03121B;
  --h-accent-hover: #6BE0FF;
  --h-accent-soft: #0E2A35;
  --h-brand: #F26A10;
  --h-up: #4ADE9F;
  --h-down: #FF8A93;
  --h-up-soft: #11281F;
  --h-down-soft: #2E1519;
  --h-alert: #E0243C;
  --h-on-alert: #FFFFFF;
  --h-warn: #FFB04A;
  --h-buy-bg: #11281F;
  --h-buy-fg: #4ADE9F;
  --h-sell-bg: #2E1519;
  --h-sell-fg: #FF8A93;
  --h-inverse: #F5F6F7;
  --h-on-inverse: #0B0C0F;
  --h-up-on-inverse: #047857;
  --h-down-on-inverse: #C81E3A;
  --h-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Halo system = Halo dark, byte-identical (test/kg-halo.js compares) */
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
  --h-canvas: #0C1014;
  --h-surface: #13181E;
  --h-fill: #22282F;
  --h-raised: #1A1F26;
  --h-line: #242A31;
  --h-line-strong: #343B44;
  --h-field-line: #6B7380;
  --h-text: #F5F6F7;
  --h-text-2: #A3AAB4;
  --h-disabled: #6B7380;
  --h-scrim: rgba(0,0,0,.6);
  --h-stage: #000000;
  --h-on-stage: #FFFFFF;
  --h-on-stage-2: #C9CED6;
  --h-veil: rgba(0,0,0,.6);
  --h-accent: #3CD6FF;
  --h-on-accent: #03121B;
  --h-accent-hover: #6BE0FF;
  --h-accent-soft: #0E2A35;
  --h-brand: #F26A10;
  --h-up: #4ADE9F;
  --h-down: #FF8A93;
  --h-up-soft: #11281F;
  --h-down-soft: #2E1519;
  --h-alert: #E0243C;
  --h-on-alert: #FFFFFF;
  --h-warn: #FFB04A;
  --h-buy-bg: #11281F;
  --h-buy-fg: #4ADE9F;
  --h-sell-bg: #2E1519;
  --h-sell-fg: #FF8A93;
  --h-inverse: #F5F6F7;
  --h-on-inverse: #0B0C0F;
  --h-up-on-inverse: #047857;
  --h-down-on-inverse: #C81E3A;
  --h-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
}

/* the bridge (HALO-DESIGN §7) */
/* Inside the Halo scope the ledger names mean Halo, so the released sheets follow without being edited. One rule:
   html.tc-app[data-theme] and html.kg-halo[data-theme] are (0,2,1), over the ledger's dark and system blocks (0,2,0),
   app-mode.css's html.tc-app (0,1,1) and the :root aliases (0,1,0); the values are var(--h-*), which the three Halo
   blocks above give per theme, so the rule is written once. A ledger alias that is a var() of a bridged name
   (--success-fill, --on-critical ...) follows by itself. --capp-dark keeps its meaning (0 light, 1 dark) and is not here. */
html.tc-app[data-theme], html.kg-halo[data-theme] {
  --paper: var(--h-canvas);
  --plane: var(--h-canvas);
  --bg-base: var(--h-canvas);
  --surface-1: var(--h-canvas);
  --ig-bg: var(--h-canvas);
  --bg-elevated: var(--h-canvas);
  --paper-2: var(--h-surface);
  --surface-2: var(--h-surface);
  --bg-surface: var(--h-surface);
  --bg-surface-2: var(--h-surface);
  --info-soft: var(--h-surface);
  --ai-soft: var(--h-surface);
  --paper-3: var(--h-fill);
  --surface-3: var(--h-fill);
  --ink: var(--h-text);
  --text-primary: var(--h-text);
  --series-1: var(--h-text);
  --accent-hover: var(--h-text);
  --ink-2: var(--h-text-2);
  --ink-3: var(--h-text-2);
  --text-secondary: var(--h-text-2);
  --text-muted: var(--h-text-2);
  --neutral: var(--h-text-2);
  --info: var(--h-text-2);
  --pending: var(--h-text-2);
  --ai: var(--h-text-2);
  --series-5: var(--h-text-2);
  --text-disabled: var(--h-disabled);
  --disabled: var(--h-disabled);
  --hair: var(--h-line);
  --border-default: var(--h-line);
  --border-subtle: var(--h-line);
  --hair-2: var(--h-line-strong);
  --border-strong: var(--h-line-strong);
  --zero-line: var(--h-line-strong);
  --info-border: var(--h-line-strong);
  --ai-border: var(--h-line-strong);
  --field-line: var(--h-field-line);
  --saffron: var(--h-accent);
  --primary: var(--h-accent);
  --accent: var(--h-accent);
  --action-fill: var(--h-accent);
  --action-fill-hover: var(--h-accent);
  --focus-ring: var(--h-accent);
  --capp-cta: var(--h-accent);
  --series-2: var(--h-accent);
  --saffron-text: var(--h-accent);
  --focus: var(--h-accent);
  --capp-accent: var(--h-accent);
  --series-6: var(--h-accent);
  --band-excellent: var(--h-accent);
  --on-saffron: var(--h-on-accent);
  --action-ink: var(--h-on-accent);
  --saffron-soft: var(--h-accent-soft);
  --accent-subtle: var(--h-accent-soft);
  --primary-soft: var(--h-accent-soft);
  --madder: var(--h-alert);
  --badge: var(--h-alert);
  --series-3: var(--h-alert);
  --band-weak: var(--h-alert);
  --on-badge: var(--h-on-alert);
  --profit: var(--h-up);
  --success: var(--h-up);
  --buy: var(--h-up);
  --verified: var(--h-accent);
  --series-4: var(--h-up);
  --band-good: var(--h-up);
  --loss: var(--h-down);
  --danger: var(--h-down);
  --critical: var(--h-down);
  --sell: var(--h-down);
  --band-critical: var(--h-down);
  --profit-soft: var(--h-up-soft);
  --profit-subtle: var(--h-up-soft);
  --loss-soft: var(--h-down-soft);
  --loss-subtle: var(--h-down-soft);
  --warning-soft: var(--h-down-soft);
  --warning: var(--h-warn);
  --band-needs_improvement: var(--h-warn);
  --warning-fill: var(--h-warn);
  --warning-border: var(--h-warn);
  --stage: var(--h-stage);
  --on-stage: var(--h-on-stage);
  --on-stage-2: var(--h-on-stage-2);
  --bg-overlay: var(--h-veil);
  --text-inverse: var(--h-canvas);
  --kilim: none;
  --kilim-v: none;
  --f-display: var(--h-font);
  --f-body: var(--h-font);
  --f-latin: var(--h-font-latin);
  --f-num: var(--h-font-num);
  --mono: var(--h-font-num);
  --control-radius: var(--h-r-sm);
  --capp-brand: var(--h-text);
  --ava-clip: none;
  --ava-radius: var(--h-r-full);
}

/* the descendant bridge */
/* kg-compat.css (generated, never edited) declares literal colours again on four elements (critique item 11; BASE
   l.256-259, 607-610, 1078, 1174-1181 and 1339-1342). A declaration on an element beats the one it would inherit from
   html whatever the specificity, so inside the Halo scope each of those names is declared again on its element, mapped
   to its Halo role. [data-theme] keeps each rule above kg-compat.css's own dark and system ones: body (0,2,2) over
   :root[data-theme] body (0,2,1); the roots through the same :is() list (1,2,1) over (1,2,0); .tg-view (0,3,1) over
   (0,3,0). */
/* body (kg-compat.css l.256-259): the --ig-* and --ch-* inks, lines and grounds, the old --z-* inks and card shadow */
html.tc-app[data-theme] body, html.kg-halo[data-theme] body {
  --z-ink: var(--h-text);
  --z-navy: var(--h-text);
  --z-card-shadow: var(--h-shadow);
  --ig-bg-2: var(--h-surface);
  --ig-elev: var(--h-fill);
  --ig-text: var(--h-text);
  --ig-text-2: var(--h-text-2);
  --ig-muted: var(--h-text-2);
  --ig-line: var(--h-line);
  --ig-line-2: var(--h-line);
  --ig-seen: var(--h-line-strong);
  --ch-up: var(--h-up);
  --ch-down: var(--h-down);
  --ch-up-fill: var(--h-buy-bg);
  --ch-down-fill: var(--h-sell-bg);
}
/* the Reels, Messages and modal roots (kg-compat.css l.607-610): their ground, inks and lines, and --ig-ring, the
   four-hue sweep, which becomes the one brand orange */
html.tc-app[data-theme] :is(#panel-community, #panel-communityreels, #panel-communitymessages, .ig-modal, .ig-story-viewer),
html.kg-halo[data-theme] :is(#panel-community, #panel-communityreels, #panel-communitymessages, .ig-modal, .ig-story-viewer) {
  --ig-bg: var(--h-canvas);
  --ig-bg-2: var(--h-surface);
  --ig-elev: var(--h-fill);
  --ig-text: var(--h-text);
  --ig-text-2: var(--h-text-2);
  --ig-muted: var(--h-text-2);
  --ig-line: var(--h-line);
  --ig-line-2: var(--h-line);
  --ig-ring: var(--h-brand);
  --ig-seen: var(--h-line-strong);
}
/* the liked heart (kg-compat.css l.1078): the alert red */
html.tc-app[data-theme] .ig-actions .ig-like.is-on > svg, html.kg-halo[data-theme] .ig-actions .ig-like.is-on > svg {
  --icon-duo: var(--h-alert);
}
/* .tg-view (kg-compat.css l.1174-1181, l.1339-1342; HALO-DESIGN §5.11): the chat on the surface ground, theirs raised,
   mine accent-soft; the wallpaper's doodle in the ground's own colour; the day pill a veil under its white words */
html.tc-app[data-theme] .tg-view, html.kg-halo[data-theme] .tg-view {
  --tg-wall: var(--h-surface);
  --tg-doodle: var(--h-surface);
  --tg-bubble: var(--h-raised);
  --tg-bubble-ink: var(--h-text);
  --tg-meta: var(--h-text-2);
  --tg-pill: var(--h-veil);
  --tg-bar: var(--h-canvas);
  --tg-line: var(--h-line);
  --tg-muted: var(--h-text-2);
  --tg-out: var(--h-accent-soft);
}