/* ============================================================================
   H2O DESIGN SYSTEM — the CANONICAL token foundation  (slice SYS-2 · FOUND-1)
   doctrine: docs/H2O-DESIGN-FOUNDATION.md (v2) §4 color law · §5 frame law ·
   §6 tokens · §9 never-list.  SYS-1 history: the DESIGN-1a/1b values lived
   here first; FOUND-1 re-values them at the SAME seam (names kept, voice new).

   THE single source of truth for H2O's design VALUES. Loaded BEFORE
   venix-overrides.css on every H2O page; every layer CONSUMES these named
   tokens via var(--h2o-…/--bs-…) — no layer re-declares a design value.

   THE VOICE (FOUND-1): one type voice (IBM Plex Sans / IBM Plex Mono,
   SELF-HOSTED woff2 — no CDN, no Google Fonts) · warm-neutral 10-step ramp
   (never pure #000/#fff) · interactive = INK (--bs-primary is warm near-black;
   light) / PAPER (warm near-white; dark) · EMBER (#F26A21) reserved for the
   FOCUS RING ONLY in this slice (temporal state transitions are FOUND-4) ·
   muted semantics · ONE depth technique (hairline borders; shadows exist only
   on overlays) · ONE ease-out + the ≤120/200/300ms motion budget.

   OFFLINE: the ONLY url() here points at the LOCAL ../fonts/h2o/ woff2 files
   (committed with their OFL licenses). No @import, no network asset.
   NO business data, NO secrets — tokens + the sanctioned frame repairs only.
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════════
   §6 — THE TYPE VOICE (self-hosted; font-display: swap; PROVEN loads)
   IBM Plex Sans = every human-facing role. IBM Plex Mono = IDs · IBAN · CUI ·
   order refs only. Weights used product-wide: 400 · 500 · 600.
   ════════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/h2o/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/h2o/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/h2o/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/h2o/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Legacy faces remain self-hosted for standalone historical surfaces. The OS
   shell below no longer composes variable display and body fonts. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/h2o/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/h2o/InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/h2o/InterDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/h2o/InterDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/h2o/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Legacy EX-031 faces, kept for standalone historical surfaces. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/h2o-v5/Manrope-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/h2o-v5/SourceSans3-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/h2o-v5/SourceSans3-VariableItalic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/h2o/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ════════════════════════════════════════════════════════════════════════════
   §6 — theme-INDEPENDENT tokens (same value in light + dark)
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Type ── one stable family + a legible 7-role scale; 400/500/600 ONLY. */
  --h2o-font-text: "IBM Plex Sans", system-ui, "Segoe UI", -apple-system, sans-serif;
  --h2o-font-display: "IBM Plex Sans", system-ui, "Segoe UI", -apple-system, sans-serif;
  --h2o-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --h2o-text-micro: 12px;      /* metadata and compact headers; never long copy */
  --h2o-text-secondary: 14px;  /* secondary copy and table metadata */
  --h2o-text-body: 16px;       /* default reading copy */
  --h2o-text-emphasis: 18px;   /* emphasized copy and compact headings */
  --h2o-text-section: 24px;    /* section titles */
  --h2o-text-kpi: 32px;        /* KPI values and card headlines */
  --h2o-text-display: 44px;    /* one page-level focal title */
  --h2o-w-regular: 400;
  --h2o-w-medium: 500;
  --h2o-w-semibold: 600;

  /* ── the Bootstrap type bridge (the theme honors these product-wide) ── */
  --bs-font-sans-serif: var(--h2o-font-text);
  --bs-font-monospace: var(--h2o-font-mono);
  --bs-body-font-size: 1rem;          /* 16px — the body role */
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;

  /* ── Spacing ── strict 4px grid (rhythm: 8 in-group · 16 between groups · 32-40 sections) */
  --h2o-sp-1: 4px;  --h2o-sp-2: 8px;  --h2o-sp-3: 12px;  --h2o-sp-4: 16px;
  --h2o-sp-5: 24px; --h2o-sp-6: 32px; --h2o-sp-7: 48px;  --h2o-sp-8: 64px; --h2o-sp-9: 96px;

  /* ── Radius ── the enforced 4-step (doctrine §6: warm-premium, deliberately warmer than Geist) */
  --h2o-radius-control: 12px;      /* buttons · inputs · chips */
  --h2o-radius-card: 18px;         /* cards */
  --h2o-radius-panel: 24px;        /* the floating app surface */
  --h2o-radius-pill: 9999px;       /* pills */

  /* ── Visual ERP OS frame ── one persistent shell contract, consumed by EX-031+
        instead of being re-minted by every visual wave. */
  --h2o-os-rail-width: 272px;
  --h2o-os-header-height: 72px;
  --h2o-os-filter-height: 80px;
  --h2o-os-content-max: 1664px;
  --h2o-os-side-width: 320px;
  --h2o-os-mobile-header-height: 60px;
  --h2o-os-mobile-dock-height: 72px;

  /* ── Control heights ── ONE scale shared by buttons = inputs = selects = rows */
  --h2o-control-sm: 32px; --h2o-control-md: 40px; --h2o-control-lg: 48px;

  /* ── Motion ── ONE ease-out; budget ≤120ms press · 160-200ms enter/exit · ≤300ms overlays.
        The legacy enter/exit names stay as ALIASES of the one curve so every
        existing consumer inherits the law without edits. transform+opacity only;
        NOTHING keyboard-initiated animates (the operator law). */
  --h2o-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --h2o-ease-enter: var(--h2o-ease);
  --h2o-ease-exit: var(--h2o-ease);
  --h2o-motion-instant: 80ms;
  --h2o-motion-fast: 160ms;
  --h2o-motion-base: 200ms;
  --h2o-motion-slow: 300ms;

  /* ── ANALYST · REGISTRUL VIU (A0 §5.15) ── semantic composition aliases only.
        No new colour, radius, shadow, type role, weight or easing enters here. */
  --h2o-analyst-rail-width: 18rem;
  --h2o-analyst-conversation-width: 48rem;
  --h2o-analyst-prose-width: 42rem;
  --h2o-analyst-context-width: 32rem;
  --h2o-analyst-evidence-width: 30rem;
  --h2o-analyst-composer-min-height: var(--h2o-control-lg);
  --h2o-analyst-composer-max-height: 12rem;
  --h2o-analyst-thread-row-height: var(--h2o-control-md);
  --h2o-analyst-turn-gap: var(--h2o-sp-7);
  --h2o-analyst-content-gap: var(--h2o-sp-4);
  --h2o-analyst-text-answer: var(--h2o-text-emphasis);
  --h2o-analyst-text-claim: var(--h2o-text-display);
  --h2o-analyst-text-claim-compact: var(--h2o-text-kpi);
  --h2o-analyst-question-width: var(--h2o-analyst-context-width);
  --h2o-analyst-exchange-gap: var(--h2o-sp-9);
  --h2o-analyst-answer-gap: var(--h2o-sp-6);
  --h2o-analyst-text-meta: var(--h2o-text-secondary);
  --h2o-analyst-text-label: var(--h2o-text-micro);
  --h2o-analyst-leading-answer: 1.65;
  --h2o-analyst-color-canvas: var(--h2o-surface-panel);
  --h2o-analyst-color-rail: var(--h2o-surface-card-muted);
  --h2o-analyst-color-user-turn: var(--h2o-surface-card-muted);
  --h2o-analyst-color-hover: var(--bs-tertiary-bg);
  --h2o-analyst-color-divider: var(--h2o-hairline);
  --h2o-analyst-color-ink: var(--h2o-ink);
  --h2o-analyst-color-pencil: var(--h2o-pencil);
  --h2o-analyst-opacity-pencil: .8;
  --h2o-analyst-opacity-ink: 1;
  --h2o-analyst-shadow-overlay: var(--h2o-shadow-overlay);
  --h2o-analyst-motion-press: var(--h2o-motion-instant);
  --h2o-analyst-motion-reveal: var(--h2o-motion-fast);
  --h2o-analyst-motion-settle: var(--h2o-motion-base);
  --h2o-analyst-motion-overlay: var(--h2o-motion-slow);
  --h2o-analyst-ease: var(--h2o-ease);

  /* ── EMBER ── the entire orange budget. In FOUND-1 it appears ONLY as the
        focus ring (+ the sanctioned brand-mark line). Never a surface.
        --h2o-ember = the identity value (FOUND-4's line moments).
        --h2o-ember-ring = the FOCUS indicator — deepened per-theme so the ring
        meets the WCAG 1.4.11 ≥3:1 non-text floor (engineered, not eyeballed;
        light canvas #FAF9F7 → 3.23:1 · dark canvas #131110 → 6.15:1). */
  --h2o-ember: #F26A21;
  --h2o-ember-ring: #EC5E12;
  --bs-focus-ring-color: color-mix(in srgb, var(--h2o-ember-ring) 32%, transparent);
  --bs-focus-ring-width: 0.2rem;

  /* ── Source colours (CONTRACT · provenance layer ONLY) ── a source hue exists
        only as a ≤2px line (rail · micro-bar · dot) — never a tint, never a
        surface, never a chart series (doctrine §2/§4). Registry-mirrored. */
  --h2o-source-softone: #F26A21;   /* SoftOne ERP (softone-h2o-distribution) */
  --h2o-source-shopify: #0EA5E9;   /* Shopify storefronts */
  --h2o-source-anaf:    #64748B;   /* ANAF — provisional neutral (planned) */
  --h2o-source-manual:  #64748B;   /* manual entry — neutral */
  --h2o-source-mixed:   #64748B;   /* mixed / total — neutral */
}

/* ════════════════════════════════════════════════════════════════════════════
   §6 — LIGHT (the default). The 10-step warm-neutral ramp (Radix same-step-
   same-job: n1-2 backgrounds · n3-5 component fills · n6-7 borders · n8 solid
   fills · n9 muted text · n10 ink). Warm-tinted, never pure #000/#fff.
   AA engineered: n9 on n1 ≈ 5.1:1 · n10 on n1 ≈ 15.9:1.
   ════════════════════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme="light"] {
  /* the ramp */
  --h2o-n1: #FAF9F7;  --h2o-n2: #F5F3F0;  --h2o-n3: #EFEDE8;  --h2o-n4: #E8E5DF;
  --h2o-n5: #E0DCD4;  --h2o-n6: #D3CEC4;  --h2o-n7: #BAB4A8;  --h2o-n8: #8D867A;
  --h2o-n9: #6E675C;  --h2o-n10: #23201D;

  /* ink · pencil (the epistemic materials — pencil = estimate/forecast/draft) */
  --h2o-ink: var(--h2o-n10);
  --h2o-ink-soft: #4A4540;
  --h2o-pencil: #756E63;            /* warm graphite · 4.96:1 on card / 4.79:1 on canvas (AA computed) */
  --h2o-on-primary: #FAF9F7;        /* text on an ink surface (never pure #fff) */

  /* Surfaces — flat quiet canvas · the panel is the reading surface · hairline depth */
  --h2o-surface-canvas: linear-gradient(180deg, #F1EEE9 0%, #F1EEE9 100%); /* flat; gradient syntax so background-image consumers keep working */
  --h2o-surface-panel: #FAF9F7;
  --h2o-surface-card: #FEFDFB;
  --h2o-surface-card-muted: #F5F3F0;

  /* Borders — ONE depth technique: the hairline */
  --h2o-hairline: #ECE9E4;
  --h2o-border-subtle: #ECE9E4;
  --h2o-border-strong: #DCD7CE;

  /* Elevation — cards/panels are FLAT at rest (borders carry structure);
     the one shadow token below is for OVERLAYS ONLY (popover/modal/drawer). */
  --h2o-shadow-floating: none;
  --h2o-shadow-card: none;
  --h2o-shadow-card-hover: none;
  --h2o-shadow-overlay: 0 24px 48px -12px rgba(35, 32, 29, 0.18), 0 4px 12px -6px rgba(35, 32, 29, 0.10);

  /* ── the Bootstrap bridge — the theme propagates the voice from here ── */
  --bs-body-bg: #FAF9F7;
  --bs-body-color: #23201D;
  --bs-body-color-rgb: 35, 32, 29;
  --bs-secondary-color: #6E675C;
  --bs-secondary-color-rgb: 110, 103, 92;
  --bs-secondary-bg: #FEFDFB;
  --bs-card-bg: #FEFDFB;
  --bs-tertiary-bg: #F3F1ED;
  --bs-tertiary-color: rgba(35, 32, 29, 0.5);
  --bs-border-color: #ECE9E4;
  --bs-border-color-translucent: rgba(35, 32, 29, 0.08);
  --bs-topbar-bg: #F1EEE9;
  --bs-topbar-search-bg: #F5F3F0;
  --bs-topbar-menu-nav-link-color: #23201D;
  --bs-emphasis-color: #23201D;
  --bs-emphasis-color-rgb: 35, 32, 29;

  /* interactive = INK (Mercury restraint: muted builds more trust than saturated) */
  --bs-primary: #23201D;
  --bs-primary-rgb: 35, 32, 29;
  --bs-primary-bg-subtle: #F0EEE9;
  --bs-primary-border-subtle: #DCD7CE;
  --bs-primary-text-emphasis: #23201D;
  --bs-link-color: #23201D;
  --bs-link-color-rgb: 35, 32, 29;
  --bs-link-hover-color: #4A4540;
  --bs-link-hover-color-rgb: 74, 69, 64;
  --bs-blue: #23201D;               /* Venix routes some brand slots through "blue" */

  /* muted semantics (doctrine §4) — every ± pairs a ▲▼ + sign elsewhere */
  --bs-success: #2F7D57;
  --bs-success-rgb: 47, 125, 87;
  --bs-success-bg-subtle: #E9F2EC;
  --bs-success-border-subtle: #C2DBCC;
  --bs-success-text-emphasis: #1F5A3D;
  --bs-warning: #C98A42;
  --bs-warning-rgb: 201, 138, 66;
  --bs-warning-bg-subtle: #F7EEDF;
  --bs-warning-border-subtle: #E7CFA9;
  --bs-warning-text-emphasis: #7A5322;
  --bs-danger: #B54A3A;
  --bs-danger-rgb: 181, 74, 58;
  --bs-danger-bg-subtle: #F6E8E4;
  --bs-danger-border-subtle: #E4BDB4;
  --bs-danger-text-emphasis: #8A3527;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK — the warm-dark mirror: luminance STACKING (canvas → panel → card step
   UP), hairline = a whisper of light, NO card shadows. Interactive inverts to
   PAPER (warm near-white ink) — never pure #fff.
   n9 on n1 ≈ 7.0:1 · n10 on n1 ≈ 15.4:1.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-bs-theme="dark"] {
  /* the ramp (dark) */
  --h2o-n1: #131110;  --h2o-n2: #1A1815;  --h2o-n3: #201D19;  --h2o-n4: #27231E;
  --h2o-n5: #2E2A24;  --h2o-n6: #3A352E;  --h2o-n7: #4C463D;  --h2o-n8: #6B6458;
  --h2o-n9: #A39C90;  --h2o-n10: #F2EFEA;

  --h2o-ink: var(--h2o-n10);
  --h2o-ink-soft: #C9C3BA;
  --h2o-pencil: #948C80;
  --h2o-on-primary: #1C1A17;
  --h2o-ember-ring: #F26A21;        /* dark canvas gives the identity value 6.15:1 — no deepening needed */

  --h2o-surface-canvas: linear-gradient(180deg, #131110 0%, #131110 100%);
  --h2o-surface-panel: #1A1815;
  --h2o-surface-card: #201D19;
  --h2o-surface-card-muted: rgba(255, 255, 255, 0.03);

  --h2o-hairline: rgba(255, 255, 255, 0.06);
  --h2o-border-subtle: rgba(255, 255, 255, 0.06);
  --h2o-border-strong: #35312B;

  --h2o-shadow-floating: none;
  --h2o-shadow-card: none;
  --h2o-shadow-card-hover: none;
  --h2o-shadow-overlay: 0 24px 48px -12px rgba(0, 0, 0, 0.55), 0 4px 12px -6px rgba(0, 0, 0, 0.4);

  --bs-body-bg: #1A1815;
  --bs-body-color: #F2EFEA;
  --bs-body-color-rgb: 242, 239, 234;
  --bs-secondary-color: #A39C90;
  --bs-secondary-color-rgb: 163, 156, 144;
  --bs-secondary-bg: #201D19;
  --bs-card-bg: #201D19;
  --bs-tertiary-bg: #27231E;
  --bs-tertiary-color: rgba(242, 239, 234, 0.5);
  --bs-border-color: #322E28;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.07);
  --bs-topbar-bg: #131110;
  --bs-topbar-search-bg: #201D19;
  --bs-emphasis-color: #F2EFEA;
  --bs-emphasis-color-rgb: 242, 239, 234;

  /* interactive inverts to PAPER (dark-mode ink) */
  --bs-primary: #F2EFEA;
  --bs-primary-rgb: 242, 239, 234;
  --bs-primary-bg-subtle: #27231E;
  --bs-primary-border-subtle: #3A352E;
  --bs-primary-text-emphasis: #F2EFEA;
  --bs-link-color: #F2EFEA;
  --bs-link-color-rgb: 242, 239, 234;
  --bs-link-hover-color: #FBF9F6;
  --bs-link-hover-color-rgb: 251, 249, 246;
  --bs-blue: #F2EFEA;

  --bs-success: #55A67D;
  --bs-success-rgb: 85, 166, 125;
  --bs-success-bg-subtle: #1D2B23;
  --bs-success-border-subtle: #2E4A3A;
  --bs-success-text-emphasis: #8CC7A6;
  --bs-warning: #D9A05E;
  --bs-warning-rgb: 217, 160, 94;
  --bs-warning-bg-subtle: #2E2417;
  --bs-warning-border-subtle: #4E3D24;
  --bs-warning-text-emphasis: #E4BC82;
  --bs-danger: #C96B5B;
  --bs-danger-rgb: 201, 107, 91;
  --bs-danger-bg-subtle: #2E1B18;
  --bs-danger-border-subtle: #543028;
  --bs-danger-text-emphasis: #E09285;
}

/* ════════════════════════════════════════════════════════════════════════════
   THE SANCTIONED FRAME REPAIRS (doctrine §5 — the theme's own seams, our layer;
   the dist is NEVER edited)
   ════════════════════════════════════════════════════════════════════════════ */

/* §5.2 — the dist card-token repair: app.min.css ships the broken
   `--bs-card-border-radius: var(--bs-)` (resolves to 0 — the mechanical reason
   154 radii went raw). One line returns every card to variable control. */
.card { --bs-card-border-radius: var(--h2o-radius-card); }

/* the type voice on data: tabular figures wherever numerals are data */
.h2o-num,
kbd, code, samp,
.h2o-mono { font-variant-numeric: tabular-nums lining-nums; }
.h2o-mono { font-family: var(--h2o-font-mono); font-size: 0.92em; }

/* dark primary buttons are PAPER — their label must be dark ink (the theme's
   own --bs-btn-* API; keeps every .btn-primary readable after the inversion) */
html[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: var(--h2o-on-primary);
  --bs-btn-hover-color: var(--h2o-on-primary);
  --bs-btn-active-color: var(--h2o-on-primary);
}