/* Material Design 3 design tokens — Xtrius 3-layer token system. LAYER 1 SYSTEM — primitives: neutrals, fonts, type-scale, spacing, radius, elevation, motion (master --xt-* values). LAYER 2 ACCENT — brand + semantic + chart hues (master --xt-* values). LAYER 3 COMPAT — every legacy --md-sys-color-* / --md-accent-* / shape / elevation / spacing name re-pointed at its best-matching --xt token so existing CSS keeps working and theming is a single Layer-1/2 edit. */ :root { /* ============================================================ LAYER 1 — SYSTEM PRIMITIVES ============================================================ */ /* Neutrals — ink (foreground) / paper (surface) / rule (border) */ --xt-ink: #0F141B; --xt-ink-2: #252B36; --xt-ink-3: #5A6270; --xt-ink-4: #8B93A1; --xt-paper: #F4F5F7; --xt-paper-2: #FAFBFC; --xt-paper-3: #FFFFFF; /* Cool surface-container shades — P11d aliases so folded `.xt-*` COMPONENT rules (e.g. the chip dropdown menu hover) read --xt-* instead of the warm MD3 `--md-sys-color-surface-container*` greys. Mapped onto the cool paper ladder (white menu surface, paper hover, paper-2 raised). */ --xt-surface-container-low: var(--xt-paper-3); --xt-surface-container: var(--xt-paper); --xt-surface-container-high: var(--xt-paper-2); --xt-rule: #E1E4EA; --xt-rule-2: #C7CBD3; /* Modal/sheet backdrop scrim — canonical brand value (was hardcoded as rgba(15,20,27,.5) in the dialog scrims; P11 folds those legacy copies). */ --xt-scrim: rgba(15, 20, 27, 0.5); /* Neutral semantic aliases (foreground / background / border roles) */ --xt-fg-1: var(--xt-ink); --xt-fg-2: var(--xt-ink-2); --xt-fg-3: var(--xt-ink-3); --xt-fg-4: var(--xt-ink-4); --xt-fg-inverse: var(--xt-paper); --xt-fg-accent: var(--xt-signal); --xt-bg-1: var(--xt-paper); --xt-bg-2: var(--xt-paper-2); --xt-bg-3: var(--xt-paper-3); --xt-bg-ink: var(--xt-ink); --xt-bg-accent: var(--xt-signal-bg); --xt-bg-ember: var(--xt-ember-bg); --xt-border-1: var(--xt-rule); --xt-border-2: var(--xt-rule-2); --xt-border-accent: var(--xt-signal); /* Interactive (action) roles */ --xt-action: var(--xt-ink); --xt-action-hover: var(--xt-ink-2); --xt-action-accent: var(--xt-signal); --xt-action-accent-hover: var(--xt-signal-2); /* Typography — Xtrius 3-font stack (global source of truth). Lifted here from xtrius_design.css `.xt-scope` (PR0 token plumbing) so the single-edit swap point reaches the whole app. Self-hosted via app_fonts.css. display = Source Serif 4 · body = IBM Plex Sans · mono = IBM Plex Mono. */ --xt-font-display: 'Source Serif 4', 'GT Sectra', 'Iowan Old Style', Georgia, serif; --xt-font-body: 'IBM Plex Sans', 'Söhne', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --xt-font-mono: 'IBM Plex Mono', 'Söhne Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Font weights */ --xt-w-regular: 400; --xt-w-medium: 500; --xt-w-semibold: 600; --xt-w-bold: 700; /* MD3 typescale rebound onto the Xtrius body stack — flips every --md-sys-typescale-* shorthand to IBM Plex Sans app-wide (PR0, intended). */ --md-sys-typescale-font: var(--xt-font-body); --md-sys-typescale-body: 400 14px/20px var(--md-sys-typescale-font); --md-sys-typescale-label-lg: 500 14px/20px var(--md-sys-typescale-font); --md-sys-typescale-title-md: 500 16px/24px var(--md-sys-typescale-font); --md-sys-typescale-title-lg: 500 20px/28px var(--md-sys-typescale-font); --md-sys-typescale-headline-sm: 400 24px/32px var(--md-sys-typescale-font); /* Xtrius typescale aliases — P11d: the folded `.xt-*` COMPONENT rules read these directly so they carry 0 `--md-sys-*` (the bridge above stays for non-component feature CSS). Same shorthand as the MD3 body/label-lg, on the Xtrius body stack. */ --xt-type-body: 400 14px/20px var(--xt-font-body); --xt-type-label-lg: 500 14px/20px var(--xt-font-body); /* Spacing scale */ --xt-s-1: 4px; --xt-s-2: 8px; --xt-s-3: 12px; --xt-s-4: 16px; --xt-s-5: 24px; --xt-s-6: 32px; --xt-s-7: 48px; --xt-s-8: 64px; /* App-wide content canvas cap — #1305/#1339 operator decision (ALL pages 1320, no tighter, no wider). Single edit point; consumed via var(--xt-canvas-max). */ --xt-canvas-max: 1320px; /* App-wide horizontal canvas gutter — the single side-inset shared by the page-chrome header, the content shell (#md3-content) AND the footer, so all three resolve to the IDENTICAL left/right edge at every viewport (UAT #10). Lives on the full-width .xt-main layer; the header/footer bands negate it to stay full-bleed. */ --xt-canvas-gutter: 22px; /* Radius scale */ --xt-r-sm: 4px; --xt-r-md: 8px; --xt-r-lg: 12px; --xt-r-pill: 999px; /* Elevation */ --xt-elev-1: 0 1px 0 var(--xt-rule); --xt-elev-2: 0 8px 24px -12px rgba(11, 18, 32, 0.18); --xt-elev-3: 0 24px 64px -24px rgba(11, 18, 32, 0.35); /* Motion */ --xt-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --xt-dur-fast: 120ms; --xt-dur-base: 200ms; --xt-dur-slow: 320ms; /* Surface-container ramp — MD3-only neutrals with no clean --xt match. Kept at their original literal values (the --xt paper trio only covers lowest/low/base whites; high/highest greys have no Xtrius equivalent). */ --md-sys-color-surface-container-low: #f7f5fa; --md-sys-color-surface-container: #f1eff4; --md-sys-color-surface-container-high: #ebe9ee; --md-sys-color-surface-container-highest: #e6e4e9; /* ============================================================ LAYER 2 — ACCENT (brand + semantic + chart hues) ============================================================ */ /* Signal — primary brand (blue) */ --xt-signal: #1B4FCE; --xt-signal-2: #3B6FE8; --xt-signal-ink: #0A2A85; --xt-signal-bg: #E4EAFB; /* Ember — tertiary accent (orange) */ --xt-ember: #C75A1F; --xt-ember-2: #E37738; --xt-ember-ink: #7A360E; --xt-ember-bg: #FBE7D7; /* Graphite — secondary accent (slate) */ --xt-graphite: #4A5968; --xt-graphite-2: #6A7A8B; --xt-graphite-ink: #2C3540; --xt-graphite-bg: #E3E6EC; /* Bonded — warehouse-grid bonded-slot accent (indigo). Item #19: a colour deliberately OUTSIDE the green→red occupancy ramp so the bonded overlay never collides with a fill band. */ --xt-bonded: #6D3BE4; --xt-bonded-ink: #3A1E80; /* Semantic status */ --xt-success: #1F7A4C; --xt-success-bg: #DFF0E6; --xt-warning: #B5791F; --xt-warning-bg: #F5ECD9; --xt-danger: #B02A2A; --xt-danger-bg: #F3DEDE; --xt-info: #1B4FCE; --xt-info-bg: #E4EAFB; /* Chart palette */ --xt-chart-1: #1B4FCE; --xt-chart-2: #4A5968; --xt-chart-3: #C75A1F; --xt-chart-4: #3B6FE8; --xt-chart-5: #6A7A8B; --xt-chart-6: #E37738; --xt-chart-grid: var(--xt-rule); --xt-chart-axis: var(--xt-fg-3); /* ============================================================ LAYER 3 — COMPAT ALIASES Legacy MD3 / md-accent names re-pointed at --xt tokens. Do not author new CSS against these — use --xt-* directly. ============================================================ */ /* Color roles — primary (→ signal) */ --md-sys-color-primary: var(--xt-signal); --md-sys-color-on-primary: var(--xt-paper-3); --md-sys-color-primary-container: var(--xt-signal-bg); --md-sys-color-on-primary-container: var(--xt-signal-ink); /* Color roles — secondary (→ graphite) */ --md-sys-color-secondary: var(--xt-graphite); --md-sys-color-on-secondary: var(--xt-paper-3); --md-sys-color-secondary-container: var(--xt-graphite-bg); --md-sys-color-on-secondary-container: var(--xt-graphite-ink); /* Color roles — tertiary (→ ember) */ --md-sys-color-tertiary: var(--xt-ember); --md-sys-color-on-tertiary: var(--xt-paper-3); --md-sys-color-tertiary-container: var(--xt-ember-bg); --md-sys-color-on-tertiary-container: var(--xt-ember-ink); /* Color roles — error (→ danger) */ --md-sys-color-error: var(--xt-danger); --md-sys-color-on-error: var(--xt-paper-3); --md-sys-color-error-container: var(--xt-danger-bg); --md-sys-color-on-error-container: var(--xt-danger); /* Status containers used by md3-alert variants (→ semantic +bg pairs). The error pair above doubles as md3-alert--danger; success/warning/info are alert-only. */ --md-sys-color-success-container: var(--xt-success-bg); --md-sys-color-on-success-container: var(--xt-success); --md-sys-color-warning-container: var(--xt-warning-bg); --md-sys-color-on-warning-container: var(--xt-warning); --md-sys-color-info-container: var(--xt-info-bg); --md-sys-color-on-info-container: var(--xt-info); /* Color roles — background / surface (→ paper / ink) */ --md-sys-color-background: var(--xt-paper); --md-sys-color-on-background: var(--xt-ink); --md-sys-color-surface: var(--xt-paper-2); --md-sys-color-on-surface: var(--xt-ink); --md-sys-color-surface-container-lowest: var(--xt-paper-3); --md-sys-color-surface-variant: var(--xt-graphite-bg); --md-sys-color-on-surface-variant: var(--xt-fg-3); /* Color roles — outline / inverse (→ rule / ink / paper) */ --md-sys-color-outline: var(--xt-rule-2); --md-sys-color-outline-variant: var(--xt-rule); --md-sys-color-inverse-surface: var(--xt-ink); --md-sys-color-inverse-on-surface: var(--xt-paper); /* Accent palette (→ semantic / signal). The "-dark"/"-grad" variants have no distinct --xt token, so they reuse the nearest base hue. */ --md-accent-success: var(--xt-success); --md-accent-success-dark: var(--xt-success); --md-accent-success-grad-2: var(--xt-success); --md-accent-warn: var(--xt-warning); --md-accent-warn-dark: var(--xt-warning); --md-accent-info: var(--xt-info); --md-accent-info-dark: var(--xt-info); --md-accent-blue: var(--xt-signal-2); --md-accent-blue-dark: var(--xt-signal); /* Shape (corner radius) → --xt-r-* */ --md-sys-shape-corner-none: 0; --md-sys-shape-corner-xs: var(--xt-r-sm); --md-sys-shape-corner-sm: var(--xt-r-md); --md-sys-shape-corner-md: var(--xt-r-lg); --md-sys-shape-corner-lg: 16px; --md-sys-shape-corner-xl: 28px; --md-sys-shape-corner-full: var(--xt-r-pill); /* Elevation → --xt-elev-* */ --md-sys-elevation-0: none; --md-sys-elevation-1: var(--xt-elev-1); --md-sys-elevation-2: var(--xt-elev-2); --md-sys-elevation-3: var(--xt-elev-3); /* Spacing (dp / px equivalents) → --xt-s-* */ --md-sys-spacing-1: var(--xt-s-1); --md-sys-spacing-2: var(--xt-s-2); --md-sys-spacing-3: var(--xt-s-3); --md-sys-spacing-4: var(--xt-s-4); --md-sys-spacing-5: 20px; --md-sys-spacing-6: var(--xt-s-5); --md-sys-spacing-8: var(--xt-s-6); --md-sys-spacing-12: var(--xt-s-7); /* Motion → --xt-* */ --md-sys-motion-duration-short: var(--xt-dur-fast); --md-sys-motion-duration-medium: var(--xt-dur-base); --md-sys-motion-easing-standard: var(--xt-ease); --md-sys-motion-easing-emphasized: var(--xt-ease); /* --bl-* editorial "Bonafide Ledger" palette → --xt-* (Phase 3 fold). Formerly triplicated across billing_cost_simulator.css (.xt-cost-sim), bonds_ledger.css (.bl-bond-surface,.pdf-page) and help.css (.csm-help). Folded here as ALIASES (names kept) because var(--bl-*) is consumed by 14 on-screen templates (bonds wizard/detail, release orders, billing components, drawer styles, …) in addition to the 3 CSS files — so the names must keep resolving app-wide. Same Layer-3 COMPAT pattern as the --md-sys-* aliases above. The warm editorial hues now resolve to the cool canonical --xt-* roles (Tier-2 sign-off covers the hue shift). NOTE: the bonds PDF (templates/bonds/pdf/bond_receipt.html) is self- contained — WeasyPrint can't resolve linked CSS, so it carries its own inline :root --bl-* block and does NOT depend on this one. */ --bl-paper: var(--xt-paper-3); /* card/page bg */ --bl-paper-warm: var(--xt-paper-2); /* warm secondary surface */ --bl-paper-line: var(--xt-rule); /* hairline */ --bl-ink: var(--xt-ink); /* body text */ --bl-ink-mute: var(--xt-ink-3); /* muted / eyebrow */ --bl-rule: var(--xt-ink); /* heavy ink rule (NOT hairline) */ --bl-oxblood: var(--xt-danger); /* primary accent / danger */ --bl-sage: var(--xt-success); /* positive / green */ --bl-amber: var(--xt-ember); /* warn / locked tags */ /* Soft tints + blue (formerly bonds_ledger.css only) */ --bl-amber-soft: var(--xt-ember-bg); /* pending pill / warn banner bg */ --bl-sage-soft: color-mix(in srgb, var(--xt-success) 18%, #fff); /* active pill bg */ --bl-oxblood-soft: var(--xt-danger-bg); /* voided pill / under-collat bg */ --bl-grey-soft: var(--xt-graphite-bg); /* neutral soft fill */ --bl-blue: var(--xt-signal); /* returned state / net-stock chip */ --bl-blue-soft: var(--xt-signal-bg); /* returned pill bg */ /* Sensitivity heatmap ramp (formerly billing_cost_simulator.css only). Mid-ramp tints have no canonical step → derived via color-mix. */ --bl-heat-1: var(--xt-danger); --bl-heat-2: color-mix(in srgb, var(--xt-danger) 70%, #fff); --bl-heat-3: color-mix(in srgb, var(--xt-danger) 35%, #fff); --bl-heat-4: var(--xt-paper-2); --bl-heat-5: color-mix(in srgb, var(--xt-success) 35%, #fff); --bl-heat-6: color-mix(in srgb, var(--xt-success) 65%, #fff); --bl-heat-7: var(--xt-success); }