/* ================================================================
   INFERREX — Design Tokens
   Token-driven CSS variables for app.inferrex.com, start.inferrex.com,
   inferrex.com, admin.inferrex.com.

   Aligns 1:1 with the published design system (design-system.html v1.0):
     - Slate (cool neutral, chroma ~0.020)  →  --neutral-*
     - Ice   (translucent primary blue)     →  --brand-*
     - Signal (warm amber, human attention) →  --warning / accent-warm
     - Space Grotesk · JetBrains Mono · Instrument Serif

   Convention: shadcn/ui-compatible.
     :root  = LIGHT theme (default)
     .dark  = DARK theme overrides (toggle the class on <html> or <body>)

   Every token below has a value in both modes. Where a token is mode-
   invariant (typography scale, spacing, motion, radii, z-index) it lives
   only on :root.
   ================================================================ */


/* ----------------------------------------------------------------
   :root — LIGHT THEME + mode-invariant primitives
   ---------------------------------------------------------------- */
:root {

  /* =========================================================
     BRAND SCALE — Ice (translucent cool blue, hue ~220–232)
     The single accent of the system. Use 600/700 as primary
     in light mode, 200/300 in dark mode.
     ========================================================= */
  --brand-50:  oklch(0.980 0.012 220);
  --brand-100: oklch(0.955 0.022 220);
  --brand-200: oklch(0.905 0.038 220);
  --brand-300: oklch(0.835 0.058 220);
  --brand-400: oklch(0.755 0.078 222);
  --brand-500: oklch(0.680 0.092 224);
  --brand-600: oklch(0.595 0.100 226);
  --brand-700: oklch(0.495 0.094 228);
  --brand-800: oklch(0.395 0.078 230);
  --brand-900: oklch(0.305 0.058 232);

  /* =========================================================
     NEUTRAL SCALE — Slate (cool, chroma ~0.020, hue 230)
     Foundation of every surface. Nearly monochrome with
     a faint navy undertone.
     ========================================================= */
  --neutral-50:  oklch(0.972 0.008 230);
  --neutral-100: oklch(0.945 0.010 230);
  --neutral-200: oklch(0.895 0.013 230);
  --neutral-300: oklch(0.815 0.016 230);
  --neutral-400: oklch(0.700 0.020 230);
  --neutral-500: oklch(0.580 0.022 230);
  --neutral-600: oklch(0.470 0.024 230);
  --neutral-700: oklch(0.380 0.024 230);
  --neutral-800: oklch(0.295 0.022 230);
  --neutral-900: oklch(0.235 0.020 230);
  --neutral-950: oklch(0.185 0.018 230);

  /* =========================================================
     CORE PALETTE — semantic surfaces (LIGHT)
     ========================================================= */
  --background:           var(--neutral-50);
  --foreground:           var(--neutral-950);
  --card:                 #ffffff;
  --card-foreground:      var(--neutral-950);
  --popover:              #ffffff;
  --popover-foreground:   var(--neutral-950);

  --primary:              var(--brand-700);
  --primary-foreground:   #ffffff;
  --primary-hover:        var(--brand-800);
  --primary-light:        oklch(0.835 0.058 220 / 0.18); /* ice-300 @ 18% — tint */

  --secondary:            var(--neutral-100);
  --secondary-foreground: var(--neutral-900);

  --muted:                var(--neutral-100);
  --muted-foreground:     var(--neutral-600);
  /* Text-emphasis aliases: ~52 refs across the app used these before they were defined, so they
     rendered by accidental inheritance (always --foreground, never the muted shade). Aliased to the
     theme-flipping foreground tokens — define once; var() resolves at use time, so dark inherits too. */
  --text-primary:         var(--foreground);
  --text-secondary:       var(--muted-foreground);
  --text-tertiary:        var(--muted-foreground);

  --accent:               var(--neutral-100);
  --accent-foreground:    var(--neutral-900);

  /* Diagram panels — theme-aware tinted surfaces so panel text (which flips
     with the theme) always contrasts and diagrams read cohesively in dark mode. */
  --diagram-panel:         var(--brand-100);
  --diagram-panel-border:  var(--brand-300);
  --diagram-danger-panel:  var(--destructive-bg);
  --diagram-success-panel: var(--success-bg);

  --border:               oklch(0.860 0.014 230 / 0.9);
  /* WCAG 2.2 1.4.11 (2026-10-09 audit): an input outline and the focus ring are the only signs of
     the control, so both need 3:1 against background and card. --border stays light for cards. */
  --input:                oklch(0.640 0.014 230);
  --ring:                 var(--brand-600);


  /* =========================================================
     SEMANTIC / STATUS
     ========================================================= */
  --success:              oklch(0.495 0.13  175);  /* 4.56:1 as text on background (was 4.04) */
  --success-bg:           oklch(0.700 0.110 175 / 0.12);
  --success-foreground:   oklch(0.30  0.10  175);
  /* The active-timer card variant referenced these before they existed → its tint, border and
     left accent-stripe rendered blank. Aliased to the success family (both themes via the refs). */
  --status-card-active-bg:     var(--success-bg);
  --status-card-active-border: var(--success);
  --status-card-active-accent: var(--success);

  --warning:              oklch(0.530 0.150 60);   /* 4.56:1 as text on background (was 3.51) */
  --warning-bg:           oklch(0.760 0.130 70 / 0.16);
  --warning-foreground:   oklch(0.38  0.13  55);

  /* L darkened 0.560→0.505 so destructive-as-text clears WCAG AA (4.5:1) for
     small text on light/tinted backgrounds (~6.3:1); white-on-destructive
     surfaces only gain contrast. */
  --destructive:          oklch(0.505 0.190 25);
  --destructive-bg:       oklch(0.620 0.150 25 / 0.12);
  --destructive-foreground: #ffffff;

  --info:                 var(--brand-700);
  --info-bg:              oklch(0.835 0.058 220 / 0.18);
  --info-foreground:      var(--brand-800);


  /* =========================================================
     OVERLAYS — translucent white scrims for hover / track on
     dark chrome (sidebar items, progress-bar tracks). White-on-
     surface, so the value is the same in both themes; the overlay
     reads only where the underlying surface is dark.
     ========================================================= */
  --overlay-subtle: oklch(1 0 0 / 0.04);
  --overlay-hover:  oklch(1 0 0 / 0.06);
  --overlay-track:  oklch(1 0 0 / 0.10);

  /* =========================================================
     GLASS — frosted translucent card surface (.glass-card).
     ========================================================= */
  --glass-bg:     oklch(1 0 0 / 0.72);
  --glass-border: oklch(1 0 0 / 0.36);

  /* =========================================================
     FIELD-TYPE BADGES (LIGHT) — categorical hues with NO semantic
     equivalent, consumed by the schema FieldRenderer so each
     inferred field type keeps a distinctive hue for at-a-glance
     scanning. Semantic types reuse the status tokens above
     (currency→success, date/percentage→warning, number/email→info,
     text/file/json→muted, unknown→destructive); only the hues
     below need a dedicated token.
     ========================================================= */
  --ftype-violet-bg:  oklch(0.955 0.030 300 / 0.7);  /* boolean */
  --ftype-violet-fg:  oklch(0.45  0.150 300);
  --ftype-indigo-bg:  oklch(0.955 0.030 275 / 0.7);  /* url, language_code */
  --ftype-indigo-fg:  oklch(0.45  0.150 275);
  --ftype-magenta-bg: oklch(0.955 0.035 330 / 0.7);  /* select, multiselect */
  --ftype-magenta-fg: oklch(0.46  0.170 330);
  --ftype-rose-bg:    oklch(0.955 0.035 12  / 0.7);  /* relation */
  --ftype-rose-fg:    oklch(0.50  0.180 12);
  --ftype-teal-bg:    oklch(0.955 0.035 185 / 0.7);  /* address, coordinates, country_code */
  --ftype-teal-fg:    oklch(0.45  0.110 185);
  --ftype-pink-bg:    oklch(0.955 0.035 350 / 0.7);  /* color */
  --ftype-pink-fg:    oklch(0.50  0.160 350);


  /* =========================================================
     TYPOGRAPHY (mode-invariant)
     ========================================================= */
  --font-sans:    "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", monospace;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-editorial: "Instrument Serif", ui-serif, Georgia, serif; /* italic editorial emphasis — matches the pitch deck */

  /* Sub-xs micro-label sizes — the system's small-label (10px) + badge (11px)
     sizes, promoted to scale steps so dense UI labels stop hardcoding text-[Npx].
     Ad-hoc 8/9px label sizes snap to --text-3xs. */
  --text-3xs:  10px;
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  21px;
  --text-3xl:  26px;
  --text-4xl:  32px;
  --text-5xl:  40px;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;
  --leading-loose:   1.8;

  --tracking-tight:  -0.022em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;


  /* =========================================================
     SPACING (mode-invariant) — 4px base, modular
     ========================================================= */
  --space-0:    0;
  --space-0\.5: 2px;
  --space-1:    4px;
  --space-1\.5: 6px;
  --space-2:    8px;
  --space-2\.5: 10px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* =========================================================
     READING MEASURE (mode-invariant) — the optimal line length for
     running prose. NN/g "Formatting Long-Form Content for Easy
     Scanning" + readability research put the comfortable measure at
     ~50–75 characters; in the brand body face (Space Grotesk) 36rem
     lands at ~75 real chars/line. Prose caps its column to this so a
     card can stay a full-width *container* while its *text* keeps a
     legible measure. The card, figures, tables and callouts still
     span the band — only running prose is constrained.
     ========================================================= */
  --reading-measure: 36rem;

  /* Minimum interactive hit area (WCAG 2.5.5 / Apple HIG). Used by toggles,
     tabs, radios, checkboxes so the tap target stays accessible from one source. */
  --touch-target: 44px;

  /* =========================================================
     DIAGRAM SCALE (mode-invariant) — the single source for the
     font-sizes and corner radii used inside diagram SVGs. The
     renderer snaps every size/radius to this scale.
     ========================================================= */
  --diagram-text-xs:    11px;
  --diagram-text-sm:    12px;
  --diagram-text-base:  13px;
  --diagram-text-md:    14px;
  --diagram-text-lg:    16px;
  --diagram-text-xl:    24px;
  --diagram-text-2xl:   36px;
  --diagram-radius-sm:    6px;
  --diagram-radius-md:    8px;
  --diagram-radius-card: 10px;
  --diagram-radius-lg:   12px;
  --diagram-radius-pill: 999px;  /* full round (e.g. the codegen circle) */

  /* Diagram spacing — the single source for canvas padding + element rhythm.
     The renderer auto-sizes each diagram's height to its content + pad, so the
     margin under the last element is identical on every diagram. */
  --diagram-space-pad:        40px;  /* canvas edge padding (incl. under last element) */
  --diagram-space-footer:     40px;  /* footer bar height */
  --diagram-space-title-gap:  30px;  /* title baseline → subtitle baseline */
  --diagram-space-margin:     40px;  /* content left margin / title x */
  --diagram-space-title-y:    46px;  /* title baseline y (recurring header position) */
  --diagram-space-row-gap:    50px;  /* timeline / list row rhythm */


  /* =========================================================
     RADIUS (mode-invariant)
     ========================================================= */
  --radius:        6px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     10px;
  --radius-xl:     14px;
  --radius-2xl:    22px;
  --radius-full:   999px;
  --radius-card:   10px;
  --radius-badge:  999px;
  --radius-button: 6px;
  --radius-input:  6px;
  --radius-modal:  14px;

  /* =========================================================
     TABS — pill variant. Defined once here using var() refs to
     theme-aware tokens, so it resolves correctly in light AND dark.
     The Tabs primitive's `pill` variant consumes these.
     ========================================================= */
  --tabs-pill-gap:                 var(--space-1\.5);
  --tabs-pill-px:                  var(--space-3);
  --tabs-pill-height:              var(--space-10);
  --tabs-pill-radius:              var(--radius-md);
  --tabs-pill-active-bg:           var(--primary-light);
  --tabs-pill-active-text:         var(--primary);
  --tabs-pill-inactive-text:       var(--muted-foreground);
  --tabs-pill-inactive-hover-bg:   var(--accent);


  /* =========================================================
     BORDER WIDTH (mode-invariant)
     ========================================================= */
  --border-width-default: 1px;
  --border-width-thick:   2px;
  --border-width-focus:   3px;


  /* =========================================================
     SHADOWS / ELEVATION (LIGHT — soft cool drops)
     ========================================================= */
  --shadow-xs:
      0 1px 0 0 oklch(0.235 0.020 230 / 0.04);
  --shadow-sm:
      0 1px 0 0 oklch(1 0 0 / 0.9) inset,
      0 1px 1px 0 oklch(0.235 0.020 230 / 0.06);
  --shadow-md:
      0 1px 0 0 oklch(1 0 0 / 0.8) inset,
      0 1px 2px 0 oklch(0.235 0.020 230 / 0.06),
      0 6px 14px -6px oklch(0.235 0.020 230 / 0.10);
  --shadow-lg:
      0 1px 0 0 oklch(1 0 0 / 0.8) inset,
      0 2px 4px 0 oklch(0.235 0.020 230 / 0.08),
      0 14px 36px -10px oklch(0.235 0.020 230 / 0.14);
  --shadow-xl:
      0 1px 0 0 oklch(1 0 0 / 0.8) inset,
      0 2px 6px 0 oklch(0.235 0.020 230 / 0.10),
      0 30px 80px -20px oklch(0.235 0.020 230 / 0.22);
  --shadow-card:     var(--shadow-md);
  --shadow-dropdown: var(--shadow-lg);
  --shadow-modal:    var(--shadow-xl);
  --shadow-focus-ring: 0 0 0 3px oklch(0.495 0.094 228 / 0.22);


  /* =========================================================
     Z-INDEX (mode-invariant)
     ========================================================= */
  --z-base:                  0;
  --z-dropdown:              1000;
  --z-sticky:                1100;
  --z-overlay:               1200;
  --z-modal:                 1300;
  --z-popover:               1400;
  --z-toast:                 1500;
  --z-tooltip:               1600;
  --z-impersonation-banner:  1700;


  /* =========================================================
     MOTION (mode-invariant)
     ========================================================= */
  --duration-fast:   140ms;
  --duration-normal: 220ms;
  --duration-slow:   420ms;

  --ease-default: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.05, 1);


  /* =========================================================
     BREAKPOINTS (mode-invariant)
     ========================================================= */
  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;


  /* =========================================================
     BUTTONS (LIGHT)
     ========================================================= */
  --button-height-sm:    28px;
  --button-height-md:    36px;
  --button-height-lg:    44px;
  --button-padding-x-sm: 12px;
  --button-padding-x-md: 16px;
  --button-padding-x-lg: 24px;
  --button-font-size-sm: 12px;
  --button-font-size-md: 13px;
  --button-font-size-lg: 14px;
  --button-radius:       var(--radius-button);
  --button-shadow:       inset 0 1px 0 oklch(1 0 0 / 0.3), 0 1px 0 oklch(0.235 0.020 230 / 0.15);

  --button-primary:          var(--brand-700);
  --button-primary-hover:    var(--brand-800);
  --button-primary-active:   var(--brand-900);
  --button-secondary:        #ffffff;
  --button-secondary-hover:  var(--neutral-100);
  --button-secondary-active: var(--neutral-200);
  --button-outline-border:   var(--neutral-300);
  --button-outline-text:     var(--neutral-900);
  --button-outline-hover:    var(--neutral-100);
  --button-ghost-hover:      var(--neutral-100);
  --button-destructive:      oklch(0.560 0.180 25);
  --button-destructive-hover:oklch(0.490 0.180 25);
  --button-disabled-bg:      var(--neutral-100);
  --button-disabled-text:    var(--neutral-400);
  --button-icon-size:        16px;


  /* =========================================================
     INPUTS / FORM FIELDS (LIGHT)
     ========================================================= */
  --input-height-sm:     28px;
  --input-height-md:     36px;
  --input-height-lg:     44px;
  --input-height:        var(--input-height-md); /* default alias — primitives use h-(--input-height) */
  --input-padding-x:     12px;
  --input-font-size:     13px;
  --input-bg:            #ffffff;
  --input-border:        var(--input);   /* 3:1 control outline, one source with --input (2026-10-09) */
  --input-border-hover:  oklch(0.560 0.016 230);
  /* The Switch's track when off (primitives/switch.tsx reads it). It was never defined, so an off
     switch drew no track at all — only its thumb, white on a white card (2026-10-30). Both themes
     follow --input, the 3:1 control outline. */
  --switch-background:   var(--input);
  --input-border-focus:  var(--brand-600);
  --input-placeholder:   var(--neutral-500);
  --input-disabled-bg:   var(--neutral-100);
  --input-disabled-text: var(--neutral-400);
  --input-error-border:  oklch(0.560 0.180 25);
  --input-error-text:    oklch(0.45 0.18 25);
  --input-radius:        var(--radius-input);

  --label-color:         var(--neutral-700);
  --label-font-size:     12px;
  --label-font-weight:   500;
  --label-margin-bottom: 6px;
  --field-gap:           16px;
  --field-helper-color:  var(--neutral-500);
  --field-error-color:   oklch(0.45 0.18 25);


  /* =========================================================
     CARDS (LIGHT)
     ========================================================= */
  --card-bg:               #ffffff;
  --card-border:           oklch(0.860 0.014 230 / 0.9);
  --card-border-radius:    var(--radius-card);
  --card-shadow:           var(--shadow-md);
  --card-padding:          24px;
  --card-padding-compact:  16px;
  --card-title-size:       16px;
  --card-title-weight:     500;
  --card-title-line-height:1.18;
  --card-hover-border:     var(--neutral-300);
  --card-hover-shadow:     var(--shadow-lg);
  --card-selected-border:  var(--brand-600);
  --card-selected-bg:      oklch(0.955 0.022 220 / 0.6);


  /* =========================================================
     TABLES (LIGHT)
     ========================================================= */
  --table-header-bg:          var(--neutral-50);
  --table-header-text:        var(--neutral-600);
  --table-header-font-size:   11px;
  --table-header-font-weight: 500;
  --table-row-bg:             #ffffff;
  --table-row-bg-alt:         var(--neutral-50);
  --table-row-hover:          var(--neutral-100);
  --table-row-selected:       oklch(0.955 0.022 220 / 0.55);
  --table-border:             oklch(0.860 0.014 230 / 0.9);
  --table-cell-padding-x:     16px;
  --table-cell-padding-y:     12px;

  /* Aliases the Table primitive expects (resolve via the base tokens above, so
     they track light/dark). Without these the primitive's borders + row hover
     resolve to nothing and tables render plain. */
  --table-border-color:        var(--table-border);
  --table-header-border-color: var(--table-border);
  --table-header-fg:           var(--table-header-text);
  --table-row-hover-bg:        var(--table-row-hover);


  /* =========================================================
     DASHBOARD (LIGHT)
     Tokens consumed by the dashboard-runtime components
     (see src/dashboard-runtime/ + dashboard.css).
     ========================================================= */
  /* Bumped from space-4 → space-5/6 for breathing room. Bigger cards feel
     less cramped in the per-machine Live view's dense stat grids. */
  --dash-card-padding:        var(--space-5);
  --dash-section-gap:         var(--space-6);
  --dash-meta-label-color:    var(--muted-foreground);
  --dash-stat-value-color:    var(--foreground);
  --dash-stat-value-size:     var(--text-xl);
  --dash-row-hover-bg:        oklch(0.945 0.010 230 / 0.4);
  --dash-row-border:          oklch(0.860 0.014 230 / 0.5);
  --dash-stat-row-divider:    oklch(0.860 0.014 230 / 0.3);
  /* Dashboard semantic palette — lighter than the platform-wide
     --success/--warning/--destructive (which are darker, intended for
     buttons + accents). Dashboard metric values + status dots wanted a
     brighter tint, so these stay separate. Background variants are mixed
     inline via color-mix(in oklab, var(--dash-X) <N>%, transparent). */
  --dash-good:     oklch(0.700 0.110 175);  /* status-dot, metric-bar-fill OK */
  --dash-good-fg:  oklch(0.780 0.110 175);  /* metric value text + trend up */
  --dash-warn:     oklch(0.760 0.130 70);   /* status-dot + metric-bar-fill warn */
  --dash-warn-fg:  oklch(0.800 0.130 70);   /* metric value text */
  --dash-critical: oklch(0.620 0.150 25);   /* status-dot + metric-bar critical */
  --dash-critical-fg: oklch(0.780 0.160 25); /* metric value text + banner color */
  /* Pulse animation colors — drive the "value changed" flash. */
  --dash-pulse-up:    oklch(0.780 0.180 152);  /* green (number went up) */
  --dash-pulse-down:  oklch(0.700 0.180 27);   /* red   (number went down) */

  /* Marketing-page accent shades — bespoke deep tints used in hero
     gradients, status badges, and the brand wash. Promoted to tokens so
     marketing.css can stop carrying raw oklch literals. */
  --brand-950:        oklch(0.255 0.040 240);  /* deep brand-wash for radial gradients */
  --marketing-amber:  oklch(0.620 0.150 60);   /* status-badge preview border */
  --marketing-success-deep: oklch(0.55 0.13 175); /* status-badge GA border */
  --marketing-muted-text: oklch(0.760 0.020 230); /* legal/footer copy */


  /* =========================================================
     BADGES / TAGS (LIGHT)
     ========================================================= */
  --badge-radius:           999px;
  --badge-padding-x:        8px;
  --badge-padding-y:        2px;
  --badge-font-size:        11px;
  --badge-font-weight:      500;

  --badge-default-bg:       var(--neutral-100);
  --badge-default-text:     var(--neutral-700);
  --badge-primary-bg:       oklch(0.835 0.058 220 / 0.20);
  --badge-primary-text:     var(--brand-800);
  --badge-success-bg:       oklch(0.700 0.110 175 / 0.12);
  --badge-success-text:     oklch(0.40 0.12 175);
  --badge-warning-bg:       oklch(0.760 0.130 70 / 0.16);
  --badge-warning-text:     oklch(0.45 0.14 55);
  --badge-destructive-bg:   oklch(0.620 0.150 25 / 0.12);
  --badge-destructive-text: oklch(0.45 0.18 25);
  --badge-info-bg:          oklch(0.835 0.058 220 / 0.18);
  --badge-info-text:        var(--brand-800);
  --badge-outline-border:   var(--neutral-300);
  --badge-outline-text:     var(--neutral-700);


  /* =========================================================
     SIDEBAR (LIGHT)
     ========================================================= */
  --sidebar-bg:                  #ffffff;
  --sidebar-foreground:          var(--neutral-800);
  --sidebar-width:               244px;
  --sidebar-width-collapsed:     64px;
  --sidebar-border:              oklch(0.860 0.014 230 / 0.9);
  --sidebar-header-height:       56px;
  --sidebar-header-border:       oklch(0.860 0.014 230 / 0.9);
  --sidebar-item-height:         32px;
  --sidebar-item-padding-x:      12px;
  --sidebar-item-radius:         6px;
  --sidebar-item-hover:          var(--neutral-100);
  --sidebar-item-active-bg:      oklch(0.835 0.058 220 / 0.14);
  --sidebar-item-active-border:  var(--brand-700);
  --sidebar-item-active-text:    var(--brand-800);
  --sidebar-item-muted:          var(--neutral-500);
  --sidebar-section-label-color: var(--neutral-600);  /* 4.5:1+ on the sidebar (neutral-500 was 4.26) */
  --sidebar-section-label-size:  10px;
  --sidebar-badge-bg:            var(--neutral-100);
  --sidebar-badge-text:          var(--neutral-700);


  /* =========================================================
     TOPBAR / NAVIGATION (LIGHT)
     ========================================================= */
  --topbar-height:       56px;
  --topbar-bg:           #ffffff;
  --topbar-border:       oklch(0.860 0.014 230 / 0.9);
  --topbar-shadow:       var(--shadow-xs);
  --topbar-text:         var(--neutral-900);
  --topbar-link-color:   var(--neutral-700);
  --topbar-link-hover:   var(--neutral-950);
  --topbar-link-active:  var(--brand-700);


  /* =========================================================
     MARKETING SITE (LIGHT)
     ========================================================= */
  /* Hero */
  --hero-bg:             var(--neutral-50);
  --hero-gradient-start: oklch(0.905 0.038 220 / 0.6);
  --hero-gradient-end:   oklch(0.972 0.008 230 / 0);
  /* Full hero glow as a token (references the theme-aware start/end above, so it
     adapts light↔dark from one definition). Primitives consume var(--hero-glow). */
  --hero-glow:           radial-gradient(ellipse 80% 60% at 50% -10%, var(--hero-gradient-start), var(--hero-gradient-end) 72%);
  --hero-text:           var(--neutral-950);
  --hero-subtext:        var(--neutral-600);
  --hero-title-size:     clamp(36px, 5vw, 60px);  /* text-4xl (mobile) → text-6xl (desktop) — the hero's real ramp */
  --hero-subtitle-size:  18px;
  /* Split-hero layout (text|mark vs text|demo, the demo getting the wider
     column) + 3D mark size. One source so the hero composition never drifts
     into literals. Carried from the marketing build. */
  --hero-pad-top:        clamp(5rem, 6vw, 7rem);    /* 80px → 112px */
  --hero-pad-bottom:     var(--space-10);           /* 40px */
  --hero-gap:            var(--space-10);           /* split column gap */
  --hero-cols:           1.1fr 0.9fr;               /* text | 3D mark */
  --hero-cols-demo:      1fr 1fr;                   /* text | live demo */
  --hero-mark-size:      clamp(14rem, 22vw, 26rem); /* w-56 → w-104 */
  /* Scroll-reveal / entrance magnitudes + durations (consumed by the .motion-*
     classes at the foot of this file). Tokenised so motion stays tunable. */
  --motion-stagger-step: 70ms;   /* per-index delay in a staggered list */
  --motion-reveal-shift: 1rem;   /* how far a revealed block rises */
  --motion-hero-shift:   0.875rem;
  --motion-lift-shift:   0.25rem; /* hover-lift translateY */
  --motion-glow-scale:   0.96;    /* hero glow bloom start scale */
  --motion-flow-duration:    2.4s;   /* inference-pipeline dot pulse */
  --motion-flow-step:        0.18s;  /* per-stage flow delay */
  --motion-rain-duration:    5s;     /* one field's fall through the inference field rain */
  --motion-rain-height:      16rem;  /* field rain panel height = the fall distance */
  /* Field rain glyphs — fixed, because the rain panel is the deep inverted surface in any theme. */
  --rain-head:  oklch(0.93 0.12 150);
  --rain-glyph: oklch(0.78 0.19 150);
  --rain-dim:   oklch(0.62 0.12 150);
  /* Inverted stat card surface (deep in any theme — deck "by the numbers"). */
  --stat-inverted-bg:     oklch(0.205 0.028 244);
  --stat-inverted-border: oklch(0.305 0.030 244);
  --stat-inverted-label:  oklch(0.740 0.022 244);
  /* Logo-wall silhouette: black marks on light surfaces (white in .dark). */
  --logo-filter: brightness(0) saturate(0);

  /* Sections */
  --section-bg-primary:   #ffffff;
  --section-bg-secondary: var(--neutral-50);
  --section-bg-accent:    oklch(0.955 0.022 220 / 0.5);
  --section-padding-y:    32px;
  /* Vertical rhythm BETWEEN blocks within a section/tab band. The single source
     of truth for marketing block spacing — the renderer applies it as space-y on
     every block list, so every page (and any new block) inherits one rhythm.
     Between-section spacing is --section-padding-y; in-card spacing is local. */
  --space-block:          var(--space-8);
  /* One spacer per TYPE — standard across the marketing site. Section/block are
     the page rhythm (32px); grid/card are the in-grid + in-card rhythm (20px).
     Don't hand-pick gap-4/gap-5/p-5 — reach for these. */
  --space-grid:           var(--space-5);  /* card-to-card gap inside a grid */
  --space-card:           var(--space-6);  /* padding inside a standard card (marketing + platform) */
  --space-card-lg:        var(--space-8);  /* padding inside a large / long-form card or banner */
  --space-stack:          var(--space-6);  /* vertical rhythm between cards/sections within an app page (denser than the marketing 32px block rhythm) */

  /* Feature cards */
  --feature-card-bg:           #ffffff;
  --feature-card-border:       oklch(0.860 0.014 230 / 0.9);
  --feature-card-icon-bg:      oklch(0.835 0.058 220 / 0.18);
  --feature-card-icon-color:   var(--brand-700);
  --feature-card-hover-border: var(--brand-500);

  /* Pricing cards */
  --pricing-card-bg:                       #ffffff;
  --pricing-card-min-width:                256px;
  --pricing-card-border:                   oklch(0.860 0.014 230 / 0.9);
  --pricing-card-recommended-border:       var(--brand-700);
  --pricing-card-recommended-badge-bg:     var(--brand-700);
  --pricing-card-recommended-badge-text:   #ffffff;
  --pricing-card-price-size:               48px;
  --pricing-card-price-color:              var(--neutral-950);
  --pricing-card-period-color:             var(--neutral-500);

  /* Comparison table */
  --comparison-header-bg:    var(--neutral-50);
  --comparison-check-color:  oklch(0.55 0.13 175);
  --comparison-dash-color:   var(--neutral-400);
  --comparison-highlight-row:oklch(0.955 0.022 220 / 0.4);

  /* CTA sections */
  --cta-bg:           var(--neutral-950);
  --cta-text:         var(--neutral-50);
  --cta-button-bg:    var(--brand-300);
  --cta-button-text:  var(--neutral-950);
  --cta-button-hover: var(--brand-200);

  /* Footer */
  --footer-bg:         var(--neutral-950);
  --footer-text:       var(--neutral-300);
  --footer-link:       var(--neutral-200);
  --footer-link-hover: #ffffff;
  --footer-border:     oklch(0.355 0.020 230 / 0.6);
  --footer-muted:      var(--neutral-500);

  /* Nav (marketing — distinct from app topbar) */
  --nav-bg:          oklch(1 0 0 / 0.7);
  --nav-bg-scrolled: oklch(1 0 0 / 0.92);
  --nav-text:        var(--neutral-900);
  --nav-link:        var(--neutral-700);
  --nav-link-hover:  var(--neutral-950);
  --nav-link-active: var(--brand-700);
  --nav-cta-bg:      var(--neutral-950);
  --nav-cta-text:    var(--neutral-50);
  --nav-mobile-bg:   #ffffff;


  /* =========================================================
     CHARTS / DATA VIZ (LIGHT)
     8 chart colors all share chroma ~0.10 and lightness ~0.55
     for harmonious legends regardless of order.
     ========================================================= */
  --chart-1: oklch(0.595 0.100 226);  /* ice-600     — primary */
  --chart-2: oklch(0.620 0.110 175);  /* teal */
  --chart-3: oklch(0.620 0.150 60);   /* signal amber */
  --chart-4: oklch(0.560 0.180 25);   /* coral */
  --chart-5: oklch(0.550 0.130 290);  /* violet */
  --chart-6: oklch(0.620 0.130 145);  /* fern */
  --chart-7: oklch(0.580 0.110 320);  /* magenta */
  --chart-8: oklch(0.500 0.040 230);  /* slate */
  --chart-grid:         oklch(0.860 0.014 230 / 0.6);
  --chart-axis:         var(--neutral-500);
  --chart-label:        var(--neutral-600);
  --chart-tooltip-bg:   var(--neutral-950);
  --chart-tooltip-text: var(--neutral-50);
  --chart-tooltip-border: var(--neutral-800);

  /* Report charts (packages/ui/src/charts, 2026-10-31). The --chart-* set above fails the
     dataviz checks as an ordered categorical palette (teal/ice and slate sit too close), so the
     app's charts use these instead, validated with the dataviz skill's validate_palette.js on
     --card in each mode:
       categorical, adjacent pairs: worst CVD ΔE 18.8 light / 18.9 dark, normal-vision ΔE 24.8 / 24.7,
         every slot >= 3:1 on the card; teal, amber-as-status and coral are left to status.
       ordinal (low → high, one hue): monotone, ΔL >= 0.06, light end 2.25:1 light / 2.52:1 dark.
     A series that means "failed" wears --viz-bad (status); "the rest" wears --viz-deemph. */
  --viz-series-1: oklch(0.595 0.100 226);  /* ice    */
  --viz-series-2: oklch(0.620 0.150 60);   /* amber  */
  --viz-series-3: oklch(0.550 0.130 290);  /* violet */
  --viz-series-4: oklch(0.620 0.130 145);  /* fern   */
  --viz-ordinal-1: oklch(0.740 0.080 226); /* low  */
  --viz-ordinal-2: oklch(0.580 0.100 226);
  --viz-ordinal-3: oklch(0.420 0.090 226); /* high */
  --viz-bad:      var(--destructive);
  --viz-deemph:   oklch(0.500 0.040 230);
  /* A figure printed inside a fill: the same two inks in both modes, picked per fill by APCA
     (light ink on every fill but the lightest ordinal step of each mode). */
  --viz-ink-light: oklch(0.990 0 0);
  --viz-ink-dark:  var(--neutral-950);


  /* =========================================================
     PROGRESS / METERS (LIGHT) — usage dashboard
     ========================================================= */
  --meter-track:         var(--neutral-200);
  --meter-fill-normal:   var(--brand-600);
  --meter-fill-warning:  oklch(0.620 0.150 60);
  --meter-fill-critical: oklch(0.560 0.180 25);
  --meter-fill-overage:  oklch(0.500 0.190 25);
  --meter-height:        6px;
  --meter-radius:        999px;
  --meter-label-color:   var(--neutral-600);
  --meter-value-color:   var(--neutral-900);


  /* =========================================================
     CONFIDENCE / AI INDICATORS (LIGHT)
     ========================================================= */
  --confidence-high:      oklch(0.45 0.12 175);
  --confidence-high-bg:   oklch(0.700 0.110 175 / 0.12);
  --confidence-medium:    oklch(0.50 0.14 55);
  --confidence-medium-bg: oklch(0.760 0.130 70 / 0.16);
  --confidence-low:       oklch(0.45 0.18 25);
  --confidence-low-bg:    oklch(0.620 0.150 25 / 0.12);


  /* =========================================================
     PROVIDER TRUST TIERS (LIGHT)
     Tiered metallic-feeling colors, low chroma so they don't shout.
     ========================================================= */
  --trust-platinum:    oklch(0.55 0.020 230);
  --trust-platinum-bg: oklch(0.895 0.013 230 / 0.6);
  --trust-gold:        oklch(0.58 0.110 85);
  --trust-gold-bg:     oklch(0.880 0.080 85 / 0.30);
  --trust-silver:      oklch(0.58 0.012 230);
  --trust-silver-bg:   oklch(0.945 0.010 230);
  --trust-bronze:      oklch(0.52 0.090 45);
  --trust-bronze-bg:   oklch(0.840 0.060 45 / 0.30);


  /* =========================================================
     HEALING TIERS (LIGHT)
     auto = system (calm green), ai = ice, human = signal amber
     ========================================================= */
  --healing-auto:     oklch(0.45 0.12 175);
  --healing-auto-bg:  oklch(0.700 0.110 175 / 0.12);
  --healing-ai:       var(--brand-700);
  --healing-ai-bg:    oklch(0.835 0.058 220 / 0.18);
  --healing-human:    oklch(0.50 0.14 55);
  --healing-human-bg: oklch(0.760 0.130 70 / 0.16);


  /* =========================================================
     SYNC STATUS (LIGHT)
     ========================================================= */
  --sync-active:     oklch(0.45 0.12 175);
  --sync-active-bg:  oklch(0.700 0.110 175 / 0.12);
  --sync-idle:       var(--neutral-500);
  --sync-idle-bg:    var(--neutral-100);
  --sync-error:      oklch(0.45 0.18 25);
  --sync-error-bg:   oklch(0.620 0.150 25 / 0.12);
  --sync-paused:     oklch(0.50 0.14 55);
  --sync-paused-bg:  oklch(0.760 0.130 70 / 0.14);
  --sync-queued:     var(--brand-700);
  --sync-queued-bg:  oklch(0.835 0.058 220 / 0.16);


  /* =========================================================
     BILLING / SUBSCRIPTION STATUS (LIGHT)
     ========================================================= */
  --billing-active:        oklch(0.45 0.12 175);
  --billing-active-bg:     oklch(0.700 0.110 175 / 0.12);
  --billing-trial:         var(--brand-700);
  --billing-trial-bg:      oklch(0.835 0.058 220 / 0.16);
  --billing-past-due:      oklch(0.50 0.14 55);
  --billing-past-due-bg:   oklch(0.760 0.130 70 / 0.18);
  --billing-suspended:     oklch(0.45 0.18 25);
  --billing-suspended-bg:  oklch(0.620 0.150 25 / 0.14);
  --billing-cancelled:     var(--neutral-500);
  --billing-cancelled-bg:  var(--neutral-100);
  --billing-pending:       oklch(0.55 0.020 230);
  --billing-pending-bg:    var(--neutral-100);


  /* =========================================================
     OVERAGE INDICATORS (LIGHT)
     ========================================================= */
  --overage-enabled:     var(--brand-700);
  --overage-enabled-bg:  oklch(0.835 0.058 220 / 0.14);
  --overage-accruing:    oklch(0.50 0.14 55);
  --overage-accruing-bg: oklch(0.760 0.130 70 / 0.18);
  --overage-capped:      oklch(0.45 0.18 25);
  --overage-capped-bg:   oklch(0.620 0.150 25 / 0.14);


  /* =========================================================
     PIPELINE / CRM (Admin)  (LIGHT)
     ========================================================= */
  --pipeline-qualification: oklch(0.58 0.012 230);
  --pipeline-discovery:     var(--brand-600);
  --pipeline-proposal:      oklch(0.55 0.13 290);
  --pipeline-negotiation:   oklch(0.50 0.14 55);
  --pipeline-won:           oklch(0.45 0.12 175);
  --pipeline-lost:          oklch(0.45 0.18 25);
  --pipeline-card-bg:       #ffffff;
  --pipeline-card-border:   oklch(0.860 0.014 230 / 0.9);
  --pipeline-card-drag:     oklch(0.835 0.058 220 / 0.25);
  --pipeline-column-bg:     var(--neutral-50);
  --pipeline-column-header: var(--neutral-700);


  /* =========================================================
     TASK PRIORITY (Admin) (LIGHT)
     ========================================================= */
  --priority-low:        var(--neutral-500);
  --priority-low-bg:     var(--neutral-100);
  --priority-normal:     var(--brand-700);
  --priority-normal-bg:  oklch(0.835 0.058 220 / 0.14);
  --priority-high:       oklch(0.50 0.14 55);
  --priority-high-bg:    oklch(0.760 0.130 70 / 0.16);
  --priority-urgent:     oklch(0.45 0.18 25);
  --priority-urgent-bg:  oklch(0.620 0.150 25 / 0.14);


  /* =========================================================
     ACTIVITY TIMELINE (LIGHT)
     ========================================================= */
  --timeline-line:        var(--neutral-200);
  --timeline-dot:         var(--neutral-400);
  --timeline-dot-system:  var(--brand-600);
  --timeline-dot-manual:  oklch(0.50 0.14 55);
  --timeline-card-bg:     #ffffff;
  --timeline-card-border: oklch(0.860 0.014 230 / 0.9);
  --timeline-timestamp:   var(--neutral-500);


  /* =========================================================
     IMPERSONATION BANNER (LIGHT)
     ========================================================= */
  --impersonation-bg:     oklch(0.760 0.130 70);
  --impersonation-text:   oklch(0.20 0.05 60);
  --impersonation-border: oklch(0.620 0.150 60);


  /* =========================================================
     TIER BADGES (LIGHT)
     Pilot → Sovereign. Cool→warm progression, calm chroma.
     ========================================================= */
  --tier-pilot:         var(--neutral-600);
  --tier-pilot-bg:      var(--neutral-100);
  --tier-starter:       var(--brand-700);
  --tier-starter-bg:    oklch(0.835 0.058 220 / 0.16);
  --tier-growth:        oklch(0.50 0.11 175);
  --tier-growth-bg:     oklch(0.700 0.110 175 / 0.14);
  --tier-scale:         oklch(0.50 0.13 290);
  --tier-scale-bg:      oklch(0.700 0.110 290 / 0.14);
  --tier-enterprise:    oklch(0.45 0.11 85);
  --tier-enterprise-bg: oklch(0.880 0.080 85 / 0.28);
  --tier-sovereign:     oklch(0.30 0.020 230);
  --tier-sovereign-bg:  var(--neutral-200);


  /* =========================================================
     CODE / TERMINAL (LIGHT)
     ========================================================= */
  --code-bg:            var(--neutral-50);
  --code-text:          var(--neutral-900);
  --code-border:        oklch(0.860 0.014 230 / 0.9);
  --code-comment:       var(--neutral-500);
  --code-keyword:       oklch(0.50 0.14 290);
  --code-string:        oklch(0.45 0.12 175);
  --code-function:      var(--brand-700);
  --code-number:        oklch(0.50 0.14 55);
  --code-inline-bg:     var(--neutral-100);
  --code-inline-text:   var(--brand-800);
  --code-inline-padding:2px 6px;

  --terminal-bg:        var(--neutral-950);
  --terminal-text:      oklch(0.945 0.010 230);
  --terminal-cursor:    var(--brand-300);
  --terminal-prompt:    var(--brand-400);
  --terminal-selection: oklch(0.495 0.094 228 / 0.4);


  /* =========================================================
     TOAST / NOTIFICATION (LIGHT)
     ========================================================= */
  --toast-bg:           #ffffff;
  --toast-text:         var(--neutral-900);
  --toast-border:       oklch(0.860 0.014 230 / 0.9);
  --toast-success-bg:   oklch(0.700 0.110 175 / 0.10);
  --toast-success-border:oklch(0.55 0.13 175 / 0.4);
  --toast-warning-bg:   oklch(0.760 0.130 70 / 0.14);
  --toast-warning-border:oklch(0.620 0.150 60 / 0.45);
  --toast-error-bg:     oklch(0.620 0.150 25 / 0.10);
  --toast-error-border: oklch(0.560 0.180 25 / 0.45);
  --toast-info-bg:      oklch(0.835 0.058 220 / 0.15);
  --toast-info-border:  oklch(0.495 0.094 228 / 0.4);
  --toast-close-color:  var(--neutral-500);


  /* =========================================================
     DIALOG / MODAL (LIGHT)
     ========================================================= */
  --modal-overlay-bg:   oklch(0.185 0.018 230 / 0.55);
  --modal-bg:           #ffffff;
  --modal-border:       oklch(0.860 0.014 230 / 0.9);
  --modal-shadow:       var(--shadow-xl);
  --modal-radius:       var(--radius-modal);
  --modal-header-border:oklch(0.860 0.014 230 / 0.9);
  --modal-footer-border:oklch(0.860 0.014 230 / 0.9);
  --modal-padding:      24px;
  --modal-max-width-sm: 400px;
  --modal-max-width-md: 560px;
  --modal-max-width-lg: 800px;
  --modal-title-color:        var(--foreground);
  --modal-title-size:         18px;
  --modal-description-color:  var(--muted-foreground);
  --modal-description-size:   14px;
  --modal-footer-gap:         8px;


  /* =========================================================
     TOOLTIP (LIGHT)
     ========================================================= */
  --tooltip-bg:      var(--neutral-950);
  --tooltip-text:    var(--neutral-50);
  --tooltip-radius:  4px;
  --tooltip-padding: 6px 10px;
  --tooltip-shadow:  var(--shadow-md);
  --tooltip-arrow:   var(--neutral-950);


  /* =========================================================
     SKELETON / LOADING (LIGHT)
     ========================================================= */
  --skeleton-bg:     var(--neutral-100);
  --skeleton-shine:  oklch(1 0 0 / 0.7);
  --skeleton-radius: 4px;


  /* =========================================================
     SCROLLBAR (LIGHT)
     ========================================================= */
  --scrollbar-width:       10px;
  --scrollbar-track:       transparent;
  --scrollbar-thumb:       oklch(0.760 0.018 230 / 0.5);
  --scrollbar-thumb-hover: oklch(0.580 0.022 230 / 0.7);


  /* =========================================================
     FOCUS (LIGHT)
     ========================================================= */
  --focus-ring-color:        oklch(0.495 0.094 228 / 0.45);
  --focus-ring-width:        3px;
  --focus-ring-offset:       2px;
  --focus-ring-offset-color: var(--background);


  /* =========================================================
     SELECTION (LIGHT)
     ========================================================= */
  --selection-bg:   oklch(0.835 0.058 220 / 0.5);
  --selection-text: var(--neutral-950);
}


/* ----------------------------------------------------------------
   .dark — DARK THEME OVERRIDES
   Brand/neutral SCALES stay the same (palettes are constants).
   Surfaces, foregrounds, shadows, semantics flip.
   ---------------------------------------------------------------- */
.dark {

  /* =========================================================
     CORE PALETTE (DARK)
     ========================================================= */
  --background:           var(--neutral-950);
  --foreground:           oklch(0.965 0.008 230);
  --card:                 oklch(0.215 0.018 230);
  --card-foreground:      oklch(0.965 0.008 230);
  --popover:              oklch(0.215 0.018 230);
  --popover-foreground:   oklch(0.965 0.008 230);

  --primary:              var(--brand-300);
  --primary-foreground:   oklch(0.140 0.016 230);
  --primary-hover:        var(--brand-200);
  --primary-light:        oklch(0.835 0.058 220 / 0.14);

  --secondary:            oklch(0.295 0.020 230);
  --secondary-foreground: oklch(0.945 0.010 230);

  --muted:                oklch(0.255 0.018 230);
  --muted-foreground:     oklch(0.760 0.020 230);

  --accent:               oklch(0.295 0.020 230);
  --accent-foreground:    oklch(0.945 0.010 230);

  /* Diagram panels — dark brand/semantic-tinted surfaces in dark mode. */
  --diagram-panel:         oklch(0.305 0.045 230);
  --diagram-panel-border:  oklch(0.440 0.050 230);
  --diagram-danger-panel:  oklch(0.305 0.075 25);
  --diagram-success-panel: oklch(0.300 0.055 168);

  --border:               oklch(0.355 0.020 230 / 0.6);
  --input:                oklch(0.510 0.020 230);  /* 3.06:1 vs background and card (was 1.49) */
  --ring:                 var(--brand-400);


  /* =========================================================
     SEMANTIC / STATUS (DARK)
     ========================================================= */
  --success:              oklch(0.700 0.110 175);
  --success-bg:           oklch(0.700 0.110 175 / 0.14);
  --success-foreground:   oklch(0.85 0.10 175);

  --warning:              oklch(0.760 0.130 70);
  --warning-bg:           oklch(0.760 0.130 70 / 0.16);
  --warning-foreground:   oklch(0.860 0.080 75);

  --destructive:          oklch(0.650 0.150 25);  /* 4.9:1 as text on a dark card (0.620 was 4.47, measured 2026-10-30) */
  --destructive-bg:       oklch(0.620 0.150 25 / 0.16);
  --destructive-foreground: oklch(0.160 0.030 25);  /* dark text on the dark-theme red: 4.99:1 (light text was 2.94) */

  --info:                 var(--brand-300);
  --info-bg:              oklch(0.835 0.058 220 / 0.12);
  --info-foreground:      var(--brand-200);


  /* =========================================================
     FIELD-TYPE BADGES (DARK) — deeper tinted bg, lifted fg so the
     badge stays legible on slate. Mirrors the light set above.
     ========================================================= */
  --ftype-violet-bg:  oklch(0.300 0.060 300 / 0.45);
  --ftype-violet-fg:  oklch(0.80  0.120 300);
  --ftype-indigo-bg:  oklch(0.300 0.060 275 / 0.45);
  --ftype-indigo-fg:  oklch(0.80  0.120 275);
  --ftype-magenta-bg: oklch(0.300 0.070 330 / 0.45);
  --ftype-magenta-fg: oklch(0.80  0.130 330);
  --ftype-rose-bg:    oklch(0.300 0.075 12  / 0.45);
  --ftype-rose-fg:    oklch(0.82  0.130 12);
  --ftype-teal-bg:    oklch(0.300 0.055 185 / 0.45);
  --ftype-teal-fg:    oklch(0.82  0.100 185);
  --ftype-pink-bg:    oklch(0.300 0.070 350 / 0.45);
  --ftype-pink-fg:    oklch(0.82  0.120 350);


  /* =========================================================
     SHADOWS (DARK — sharper top-highlight, deeper drop)
     ========================================================= */
  --shadow-xs:
      0 1px 0 0 oklch(1 0 0 / 0.04) inset;
  --shadow-sm:
      0 1px 0 0 oklch(1 0 0 / 0.04) inset,
      0 1px 1px 0 oklch(0 0 0 / 0.25);
  --shadow-md:
      0 1px 0 0 oklch(1 0 0 / 0.06) inset,
      0 1px 2px 0 oklch(0 0 0 / 0.35),
      0 6px 14px -6px oklch(0 0 0 / 0.45);
  --shadow-lg:
      0 1px 0 0 oklch(1 0 0 / 0.08) inset,
      0 2px 4px 0 oklch(0 0 0 / 0.35),
      0 14px 36px -10px oklch(0 0 0 / 0.55);
  --shadow-xl:
      0 1px 0 0 oklch(1 0 0 / 0.10) inset,
      0 2px 6px 0 oklch(0 0 0 / 0.40),
      0 30px 80px -20px oklch(0 0 0 / 0.65);
  --shadow-card:       var(--shadow-md);
  --shadow-dropdown:   var(--shadow-lg);
  --shadow-modal:      var(--shadow-xl);
  --shadow-focus-ring: 0 0 0 3px oklch(0.755 0.078 222 / 0.25);


  /* =========================================================
     BUTTONS (DARK)
     ========================================================= */
  --button-primary:          var(--brand-300);
  --button-primary-hover:    var(--brand-200);
  --button-primary-active:   var(--brand-100);
  --button-secondary:        oklch(0.295 0.020 230);
  --button-secondary-hover:  oklch(0.345 0.020 230);
  --button-secondary-active: oklch(0.380 0.024 230);
  --button-outline-border:   oklch(0.430 0.022 230 / 0.9);
  --button-outline-text:     oklch(0.965 0.008 230);
  --button-outline-hover:    oklch(0.255 0.018 230);
  --button-ghost-hover:      oklch(0.255 0.018 230);
  --button-destructive:      oklch(0.620 0.150 25);
  --button-destructive-hover:oklch(0.680 0.150 25);
  --button-disabled-bg:      oklch(0.255 0.018 230);
  --button-disabled-text:    oklch(0.470 0.024 230);


  /* =========================================================
     INPUTS (DARK)
     ========================================================= */
  --input-bg:            var(--neutral-950);
  --input-border:        var(--input);   /* 3:1 control outline, one source with --input (2026-10-09) */
  --input-border-hover:  oklch(0.600 0.024 230);
  --input-border-focus:  var(--brand-400);
  --input-placeholder:   oklch(0.580 0.022 230);
  --input-disabled-bg:   oklch(0.255 0.018 230);
  --input-disabled-text: oklch(0.470 0.024 230);
  --input-error-border:  oklch(0.620 0.150 25);
  --input-error-text:    oklch(0.78 0.12 25);

  --label-color:         oklch(0.760 0.020 230);
  --field-helper-color:  oklch(0.580 0.022 230);
  --field-error-color:   oklch(0.78 0.12 25);


  /* =========================================================
     CARDS (DARK)
     ========================================================= */
  --card-bg:               oklch(0.215 0.018 230);
  --card-border:           oklch(0.355 0.020 230 / 0.6);
  --card-shadow:           var(--shadow-md);
  --card-hover-border:     oklch(0.430 0.022 230 / 0.9);
  --card-hover-shadow:     var(--shadow-lg);
  --card-selected-border:  var(--brand-400);
  --card-selected-bg:      oklch(0.835 0.058 220 / 0.10);


  /* =========================================================
     TABLES (DARK)
     ========================================================= */
  --table-header-bg:     oklch(0.255 0.018 230);
  --table-header-text:   oklch(0.760 0.020 230);
  --table-row-bg:        oklch(0.215 0.018 230);
  --table-row-bg-alt:    oklch(0.235 0.018 230);
  --table-row-hover:     oklch(0.295 0.020 230);
  --table-row-selected:  oklch(0.835 0.058 220 / 0.10);
  --table-border:        oklch(0.355 0.020 230 / 0.6);


  /* =========================================================
     DASHBOARD (DARK)
     ========================================================= */
  --dash-row-hover-bg:     oklch(0.295 0.020 230 / 0.4);
  --dash-row-border:       oklch(0.355 0.020 230 / 0.5);
  --dash-stat-row-divider: oklch(0.355 0.020 230 / 0.3);


  /* =========================================================
     BADGES (DARK)
     ========================================================= */
  --badge-default-bg:       oklch(0.295 0.020 230);
  --badge-default-text:     oklch(0.760 0.020 230);
  --badge-primary-bg:       oklch(0.835 0.058 220 / 0.10);
  --badge-primary-text:     var(--brand-200);
  --badge-success-bg:       oklch(0.700 0.110 175 / 0.12);
  --badge-success-text:     oklch(0.85 0.10 175);
  --badge-warning-bg:       oklch(0.760 0.130 70 / 0.14);
  --badge-warning-text:     oklch(0.860 0.080 75);
  --badge-destructive-bg:   oklch(0.620 0.150 25 / 0.14);
  --badge-destructive-text: oklch(0.85 0.10 25);
  --badge-info-bg:          oklch(0.835 0.058 220 / 0.12);
  --badge-info-text:        var(--brand-200);
  --badge-outline-border:   oklch(0.430 0.022 230 / 0.9);
  --badge-outline-text:     oklch(0.760 0.020 230);


  /* =========================================================
     SIDEBAR (DARK)
     ========================================================= */
  --sidebar-bg:                  oklch(0.205 0.018 230);
  --sidebar-foreground:          oklch(0.945 0.010 230);
  --sidebar-border:              oklch(0.355 0.020 230 / 0.6);
  --sidebar-header-border:       oklch(0.355 0.020 230 / 0.6);
  --sidebar-item-hover:          oklch(0.255 0.018 230);
  --sidebar-item-active-bg:      oklch(0.835 0.058 220 / 0.10);
  --sidebar-item-active-border:  var(--brand-400);
  --sidebar-item-active-text:    var(--brand-200);
  --sidebar-item-muted:          oklch(0.580 0.022 230);
  --sidebar-section-label-color: oklch(0.640 0.022 230);  /* 4.5:1+ on the dark sidebar (0.580 was 4.19) */
  --sidebar-badge-bg:            oklch(0.295 0.020 230);
  --sidebar-badge-text:          oklch(0.760 0.020 230);


  /* =========================================================
     TOPBAR (DARK)
     ========================================================= */
  --topbar-bg:          oklch(0.215 0.018 230);
  --topbar-border:      oklch(0.355 0.020 230 / 0.6);
  --topbar-text:        oklch(0.965 0.008 230);
  --topbar-link-color:  oklch(0.760 0.020 230);
  --topbar-link-hover:  oklch(0.965 0.008 230);
  --topbar-link-active: var(--brand-300);


  /* =========================================================
     MARKETING SITE (DARK)
     ========================================================= */
  --hero-bg:             var(--neutral-950);
  --hero-gradient-start: oklch(0.305 0.058 232 / 0.55);
  --hero-gradient-end:   oklch(0.185 0.018 230 / 0);
  --hero-text:           oklch(0.965 0.008 230);
  --hero-subtext:        oklch(0.760 0.020 230);

  --section-bg-primary:   var(--neutral-950);
  --section-bg-secondary: oklch(0.215 0.018 230);
  --section-bg-accent:    oklch(0.305 0.058 232 / 0.25);

  --feature-card-bg:           oklch(0.215 0.018 230);
  --feature-card-border:       oklch(0.355 0.020 230 / 0.6);
  --feature-card-icon-bg:      oklch(0.835 0.058 220 / 0.10);
  --feature-card-icon-color:   var(--brand-300);
  --feature-card-hover-border: var(--brand-500);

  --pricing-card-bg:                       oklch(0.215 0.018 230);
  --pricing-card-border:                   oklch(0.355 0.020 230 / 0.6);
  --pricing-card-recommended-border:       var(--brand-400);
  --pricing-card-recommended-badge-bg:     var(--brand-300);
  --pricing-card-recommended-badge-text:   oklch(0.140 0.016 230);
  --pricing-card-price-color:              oklch(0.965 0.008 230);
  --pricing-card-period-color:             oklch(0.580 0.022 230);

  --comparison-header-bg:    oklch(0.255 0.018 230);
  --comparison-check-color:  oklch(0.700 0.110 175);
  --comparison-dash-color:   oklch(0.470 0.024 230);
  --comparison-highlight-row:oklch(0.835 0.058 220 / 0.08);

  --cta-bg:           oklch(0.215 0.018 230);
  --cta-text:         oklch(0.965 0.008 230);
  --cta-button-bg:    var(--brand-300);
  --cta-button-text:  oklch(0.140 0.016 230);
  --cta-button-hover: var(--brand-200);

  --footer-bg:         oklch(0.185 0.018 230);
  --footer-text:       oklch(0.760 0.020 230);
  --footer-link:       oklch(0.895 0.013 230);
  --footer-link-hover: oklch(0.965 0.008 230);
  --footer-border:     oklch(0.355 0.020 230 / 0.6);
  --footer-muted:      oklch(0.470 0.024 230);

  --nav-bg:          oklch(0.215 0.018 230 / 0.6);
  --nav-bg-scrolled: oklch(0.215 0.018 230 / 0.92);
  --nav-text:        oklch(0.965 0.008 230);
  --nav-link:        oklch(0.760 0.020 230);
  --nav-link-hover:  oklch(0.965 0.008 230);
  --nav-link-active: var(--brand-300);
  --nav-cta-bg:      var(--brand-300);
  --nav-cta-text:    oklch(0.140 0.016 230);
  --nav-mobile-bg:   oklch(0.215 0.018 230);


  /* =========================================================
     CHARTS (DARK) — lifted lightness for legibility on slate
     ========================================================= */
  --chart-1: oklch(0.755 0.078 222);
  --chart-2: oklch(0.730 0.110 175);
  --chart-3: oklch(0.760 0.130 70);
  --chart-4: oklch(0.680 0.150 25);
  --chart-5: oklch(0.680 0.120 290);
  --chart-6: oklch(0.720 0.130 145);
  --chart-7: oklch(0.680 0.110 320);
  --chart-8: oklch(0.620 0.030 230);
  --chart-grid:           oklch(0.355 0.020 230 / 0.5);
  --chart-axis:           oklch(0.580 0.022 230);
  --chart-label:          oklch(0.760 0.020 230);
  --chart-tooltip-bg:     oklch(0.140 0.016 230);
  --chart-tooltip-text:   oklch(0.965 0.008 230);
  --chart-tooltip-border: oklch(0.355 0.020 230);
  /* Report charts (dark): the same hues stepped for the dark card, validated against it. The
     ordinal ramp flips its anchor: more is lighter on a dark surface. */
  --viz-series-1: oklch(0.640 0.110 226);
  --viz-series-2: oklch(0.640 0.150 60);
  --viz-series-3: oklch(0.640 0.130 290);
  --viz-series-4: oklch(0.640 0.130 145);
  --viz-ordinal-1: oklch(0.460 0.080 226);
  --viz-ordinal-2: oklch(0.640 0.100 226);
  --viz-ordinal-3: oklch(0.820 0.070 226);
  --viz-deemph:   oklch(0.620 0.030 230);


  /* =========================================================
     PROGRESS / METERS (DARK)
     ========================================================= */
  --meter-track:         oklch(0.295 0.020 230);
  --meter-fill-normal:   var(--brand-400);
  --meter-fill-warning:  oklch(0.760 0.130 70);
  --meter-fill-critical: oklch(0.620 0.150 25);
  --meter-fill-overage:  oklch(0.580 0.180 25);
  --meter-label-color:   oklch(0.760 0.020 230);
  --meter-value-color:   oklch(0.965 0.008 230);


  /* =========================================================
     CONFIDENCE (DARK)
     ========================================================= */
  --confidence-high:      oklch(0.85 0.10 175);
  --confidence-high-bg:   oklch(0.700 0.110 175 / 0.14);
  --confidence-medium:    oklch(0.860 0.080 75);
  --confidence-medium-bg: oklch(0.760 0.130 70 / 0.16);
  --confidence-low:       oklch(0.85 0.10 25);
  --confidence-low-bg:    oklch(0.620 0.150 25 / 0.14);


  /* =========================================================
     PROVIDER TRUST TIERS (DARK)
     ========================================================= */
  --trust-platinum:    oklch(0.895 0.013 230);
  --trust-platinum-bg: oklch(0.580 0.022 230 / 0.20);
  --trust-gold:        oklch(0.860 0.090 85);
  --trust-gold-bg:     oklch(0.620 0.110 85 / 0.18);
  --trust-silver:      oklch(0.815 0.016 230);
  --trust-silver-bg:   oklch(0.470 0.024 230 / 0.30);
  --trust-bronze:      oklch(0.760 0.080 45);
  --trust-bronze-bg:   oklch(0.520 0.090 45 / 0.22);


  /* =========================================================
     HEALING TIERS (DARK)
     ========================================================= */
  --healing-auto:     oklch(0.85 0.10 175);
  --healing-auto-bg:  oklch(0.700 0.110 175 / 0.14);
  --healing-ai:       var(--brand-300);
  --healing-ai-bg:    oklch(0.835 0.058 220 / 0.12);
  --healing-human:    oklch(0.860 0.080 75);
  --healing-human-bg: oklch(0.760 0.130 70 / 0.16);


  /* =========================================================
     SYNC STATUS (DARK)
     ========================================================= */
  --sync-active:    oklch(0.85 0.10 175);
  --sync-active-bg: oklch(0.700 0.110 175 / 0.14);
  --sync-idle:      oklch(0.580 0.022 230);
  --sync-idle-bg:   oklch(0.295 0.020 230);
  --sync-error:     oklch(0.85 0.10 25);
  --sync-error-bg:  oklch(0.620 0.150 25 / 0.14);
  --sync-paused:    oklch(0.860 0.080 75);
  --sync-paused-bg: oklch(0.760 0.130 70 / 0.14);
  --sync-queued:    var(--brand-300);
  --sync-queued-bg: oklch(0.835 0.058 220 / 0.12);


  /* =========================================================
     BILLING STATUS (DARK)
     ========================================================= */
  --billing-active:       oklch(0.85 0.10 175);
  --billing-active-bg:    oklch(0.700 0.110 175 / 0.14);
  --billing-trial:        var(--brand-300);
  --billing-trial-bg:     oklch(0.835 0.058 220 / 0.12);
  --billing-past-due:     oklch(0.860 0.080 75);
  --billing-past-due-bg:  oklch(0.760 0.130 70 / 0.18);
  --billing-suspended:    oklch(0.85 0.10 25);
  --billing-suspended-bg: oklch(0.620 0.150 25 / 0.18);
  --billing-cancelled:    oklch(0.580 0.022 230);
  --billing-cancelled-bg: oklch(0.295 0.020 230);
  --billing-pending:      oklch(0.760 0.020 230);
  --billing-pending-bg:   oklch(0.295 0.020 230);


  /* =========================================================
     OVERAGE (DARK)
     ========================================================= */
  --overage-enabled:     var(--brand-300);
  --overage-enabled-bg:  oklch(0.835 0.058 220 / 0.12);
  --overage-accruing:    oklch(0.860 0.080 75);
  --overage-accruing-bg: oklch(0.760 0.130 70 / 0.18);
  --overage-capped:      oklch(0.85 0.10 25);
  --overage-capped-bg:   oklch(0.620 0.150 25 / 0.16);


  /* =========================================================
     PIPELINE (DARK)
     ========================================================= */
  --pipeline-qualification: oklch(0.760 0.020 230);
  --pipeline-discovery:     var(--brand-300);
  --pipeline-proposal:      oklch(0.75 0.12 290);
  --pipeline-negotiation:   oklch(0.860 0.080 75);
  --pipeline-won:           oklch(0.85 0.10 175);
  --pipeline-lost:          oklch(0.85 0.10 25);
  --pipeline-card-bg:       oklch(0.235 0.018 230);
  --pipeline-card-border:   oklch(0.355 0.020 230 / 0.6);
  --pipeline-card-drag:     oklch(0.835 0.058 220 / 0.25);
  --pipeline-column-bg:     oklch(0.205 0.018 230);
  --pipeline-column-header: oklch(0.760 0.020 230);


  /* =========================================================
     TASK PRIORITY (DARK)
     ========================================================= */
  --priority-low:       oklch(0.580 0.022 230);
  --priority-low-bg:    oklch(0.295 0.020 230);
  --priority-normal:    var(--brand-300);
  --priority-normal-bg: oklch(0.835 0.058 220 / 0.12);
  --priority-high:      oklch(0.860 0.080 75);
  --priority-high-bg:   oklch(0.760 0.130 70 / 0.16);
  --priority-urgent:    oklch(0.85 0.10 25);
  --priority-urgent-bg: oklch(0.620 0.150 25 / 0.16);


  /* =========================================================
     TIMELINE (DARK)
     ========================================================= */
  --timeline-line:        oklch(0.355 0.020 230 / 0.6);
  --timeline-dot:         oklch(0.470 0.024 230);
  --timeline-dot-system:  var(--brand-400);
  --timeline-dot-manual:  oklch(0.860 0.080 75);
  --timeline-card-bg:     oklch(0.235 0.018 230);
  --timeline-card-border: oklch(0.355 0.020 230 / 0.6);
  --timeline-timestamp:   oklch(0.580 0.022 230);


  /* =========================================================
     IMPERSONATION (DARK)
     ========================================================= */
  --impersonation-bg:     oklch(0.620 0.150 60);
  --impersonation-text:   oklch(0.16 0.04 60);
  --impersonation-border: oklch(0.760 0.130 70);


  /* =========================================================
     TIER BADGES (DARK)
     ========================================================= */
  --tier-pilot:         oklch(0.760 0.020 230);
  --tier-pilot-bg:      oklch(0.295 0.020 230);
  --tier-starter:       var(--brand-300);
  --tier-starter-bg:    oklch(0.835 0.058 220 / 0.12);
  --tier-growth:        oklch(0.85 0.10 175);
  --tier-growth-bg:     oklch(0.700 0.110 175 / 0.12);
  --tier-scale:         oklch(0.78 0.12 290);
  --tier-scale-bg:      oklch(0.700 0.110 290 / 0.14);
  --tier-enterprise:    oklch(0.860 0.080 85);
  --tier-enterprise-bg: oklch(0.620 0.110 85 / 0.16);
  --tier-sovereign:     oklch(0.945 0.010 230);
  --tier-sovereign-bg:  oklch(0.380 0.024 230);


  /* =========================================================
     CODE / TERMINAL (DARK)
     ========================================================= */
  --code-bg:          oklch(0.205 0.018 230);
  --code-text:        oklch(0.945 0.010 230);
  --code-border:      oklch(0.355 0.020 230 / 0.6);
  --code-comment:     oklch(0.580 0.022 230);
  --code-keyword:     oklch(0.78 0.12 290);
  --code-string:      oklch(0.85 0.10 175);
  --code-function:    var(--brand-300);
  --code-number:      oklch(0.860 0.080 75);
  --code-inline-bg:   oklch(0.295 0.020 230);
  --code-inline-text: var(--brand-200);

  --terminal-bg:        oklch(0.140 0.016 230);
  --terminal-text:      oklch(0.945 0.010 230);
  --terminal-cursor:    var(--brand-300);
  --terminal-prompt:    var(--brand-400);
  --terminal-selection: oklch(0.495 0.094 228 / 0.4);


  /* =========================================================
     TOAST (DARK)
     ========================================================= */
  --toast-bg:            oklch(0.235 0.018 230);
  --toast-text:          oklch(0.965 0.008 230);
  --toast-border:        oklch(0.355 0.020 230 / 0.6);
  --toast-success-bg:    oklch(0.700 0.110 175 / 0.12);
  --toast-success-border:oklch(0.700 0.110 175 / 0.35);
  --toast-warning-bg:    oklch(0.760 0.130 70 / 0.14);
  --toast-warning-border:oklch(0.760 0.130 70 / 0.4);
  --toast-error-bg:      oklch(0.620 0.150 25 / 0.14);
  --toast-error-border:  oklch(0.620 0.150 25 / 0.45);
  --toast-info-bg:       oklch(0.835 0.058 220 / 0.12);
  --toast-info-border:   oklch(0.755 0.078 222 / 0.4);
  --toast-close-color:   oklch(0.580 0.022 230);


  /* =========================================================
     MODAL (DARK)
     ========================================================= */
  --modal-overlay-bg:    oklch(0 0 0 / 0.7);
  --modal-bg:            oklch(0.215 0.018 230);
  --modal-border:        oklch(0.355 0.020 230 / 0.6);
  --modal-header-border: oklch(0.355 0.020 230 / 0.6);
  --modal-footer-border: oklch(0.355 0.020 230 / 0.6);


  /* =========================================================
     TOOLTIP (DARK)
     ========================================================= */
  --tooltip-bg:    oklch(0.295 0.020 230);
  --tooltip-text:  oklch(0.965 0.008 230);
  --tooltip-arrow: oklch(0.295 0.020 230);


  /* =========================================================
     SKELETON (DARK)
     ========================================================= */
  --skeleton-bg:    oklch(0.255 0.018 230);
  --skeleton-shine: oklch(0.355 0.020 230 / 0.7);


  /* =========================================================
     SCROLLBAR (DARK)
     ========================================================= */
  --scrollbar-track:       transparent;
  --scrollbar-thumb:       oklch(0.380 0.024 230 / 0.6);
  --scrollbar-thumb-hover: oklch(0.470 0.024 230 / 0.85);


  /* =========================================================
     FOCUS (DARK)
     ========================================================= */
  --focus-ring-color:        oklch(0.755 0.078 222 / 0.55);
  --focus-ring-offset-color: var(--background);


  /* =========================================================
     SELECTION (DARK)
     ========================================================= */
  --selection-bg:   oklch(0.755 0.078 222 / 0.7);  /* 5.16:1 under selected text (was 2.89 at 0.45) */
  --selection-text: oklch(0.140 0.016 230);
}


/* ----------------------------------------------------------------
   Optional: honor system preference when no explicit class set.
   Comment this block out if you control the theme purely via JS
   adding/removing the .dark class.
   ---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    /* Re-apply every dark override. To avoid duplicating the entire
       .dark block, you can use a single source of truth (the .dark
       selector) and toggle the class server-side or via a small
       inline script. This media query is intentionally left empty
       so it does NOT override an explicit .light class. */
  }
}

/* ===== Motion layer — carried verbatim from the marketing build (feat/marketing-sexier-seo). Reveal/hero-entrance/glow/marquee/flow/logo/edge-card/lift, all token-driven + reduced-motion safe. ===== */
/* Scroll-reveal: fade + rise once .is-revealed is added (IntersectionObserver
   in useRevealOnScroll). Stagger via --reveal-index (integer, set inline). */
.motion-reveal {
  opacity: 0;
  transform: translateY(var(--motion-reveal-shift));
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * var(--motion-stagger-step));
  will-change: opacity, transform;
}
.motion-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Hero entrance: items rise in on mount, staggered by --reveal-index. */
@keyframes ix-hero-rise {
  from { opacity: 0; transform: translateY(var(--motion-hero-shift)); }
  to   { opacity: 1; transform: none; }
}
.motion-hero-item {
  opacity: 0;
  animation: ix-hero-rise var(--duration-slow) var(--ease-out) forwards;
  animation-delay: calc(var(--reveal-index, 0) * var(--motion-stagger-step));
}

/* Hero glow bloom: the radial --hero-glow scales + fades in on mount. */
@keyframes ix-glow-bloom {
  from { opacity: 0; transform: scale(var(--motion-glow-scale)); }
  to   { opacity: 1; transform: none; }
}
.motion-glow {
  animation: ix-glow-bloom var(--duration-slow) var(--ease-out) forwards;
}

/* Inference-pipeline flow: a dot pulses through each stage in sequence
   (staggered by --reveal-index), giving a "data flowing through the layers"
   feel. Static under reduced motion. */
@keyframes ix-flow {
  0%, 70%, 100% { opacity: 0.25; transform: scale(1); }
  35%           { opacity: 1; transform: scale(1.35); }
}
.ix-flow-dot {
  animation: ix-flow var(--motion-flow-duration) var(--ease-in-out) infinite;
  animation-delay: calc(var(--reveal-index, 0) * var(--motion-flow-step));
}

/* Field rain (inference live view): each discovered field name falls down a deep
   panel as it arrives. FieldRain renders a static list under reduced motion, so
   the drops never need a reduced-motion override. */
@keyframes ix-rain-fall {
  0%   { opacity: 0; transform: translateY(-2.5rem); }
  6%   { opacity: 1; }
  75%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(var(--motion-rain-height)); }
}
.ix-rain {
  position: relative;
  overflow: hidden;
  height: var(--motion-rain-height);
  background: var(--stat-inverted-bg);
  border: 1px solid var(--stat-inverted-border);
}
.ix-rain-drop {
  position: absolute;
  top: 0;
  padding-inline: var(--space-1);
  animation: ix-rain-fall var(--motion-rain-duration) linear forwards;
  will-change: transform, opacity;
}
.ix-rain-head {
  color: var(--rain-head);
  text-shadow: 0 0 0.5rem color-mix(in srgb, var(--rain-glyph) 70%, transparent);
}
.ix-rain-dim { color: var(--rain-dim); }

/* Logo wall: render any brand mark as a muted monochrome silhouette (theme-aware
   via --logo-filter, so it works on light + dark and tames near-black marks like
   Palantir), brightening on hover. */
.ix-logo {
  filter: var(--logo-filter);
  opacity: 0.5;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.ix-logo:hover { opacity: 0.85; }
.dark { --logo-filter: brightness(0) invert(1); }

/* Editorial capability card (deck style): a faint brand-tinted gradient + a
   cyan corner dot that lights on hover. Pairs with .motion-lift. */
.ix-edge-card {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(155deg, var(--card) 58%, color-mix(in srgb, var(--primary) 8%, var(--card)));
}
.ix-corner-dot {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--primary);
  opacity: 0.4;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
  transition: opacity var(--duration-normal) var(--ease-out);
}
.ix-edge-card:hover .ix-corner-dot { opacity: 1; }

/* Inverted stat card (deck "by the numbers"): a deep surface in any theme with
   a glowing brand number. */
.ix-stat-inverted {
  background: var(--stat-inverted-bg);
  border-color: var(--stat-inverted-border);
  color: var(--stat-inverted-label);
}
.ix-stat-number {
  text-shadow: 0 0 24px color-mix(in srgb, var(--primary) 32%, transparent);
}

/* Hero 3D mark: a slow idle float + smooth cursor-parallax wrapper. */
@keyframes ix-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.75rem); }
}
.motion-float {
  animation: ix-float 6s var(--ease-in-out) infinite;
}
.ix-parallax {
  transition: transform var(--duration-normal) var(--ease-out);
  will-change: transform;
}

/* Hover-lift: cards rise + deepen their shadow on hover (border too, so a card
   that also tints its border on hover transitions all three from one class). */
.motion-lift {
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}
.motion-lift:hover {
  transform: translateY(calc(-1 * var(--motion-lift-shift)));
  box-shadow: var(--card-hover-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .motion-hero-item,
  .motion-glow,
  .motion-float,
  .ix-flow-dot {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .ix-parallax {
    transition: none;
    transform: none !important;
  }
  .motion-lift {
    transition: none;
  }
  .motion-lift:hover {
    transform: none;
    box-shadow: var(--card-hover-shadow);
  }
}

/* Global reduced-motion guard — neutralise transitions/animations app-wide when
   the OS requests reduced motion. (Framer Motion is handled separately by
   <MotionProvider> / MotionConfig reducedMotion="user".) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ----------------------------------------------------------------
   APP SHELL & SHARED APP COMPONENTS (customer app, hand-off 2026-10-11)
   Shell, StatusPill, StateBlock, ConfirmPanel, ListToolbar in
   packages/ui/src/app/. Measurements from the hand-off README
   "Design tokens" and designs/app/Shell.dc.html. Colours refer to
   the semantic tokens above, so both themes follow.
   ---------------------------------------------------------------- */
:root {
  /* Desktop chrome */
  --shell-sidebar-width:      232px;
  --shell-rail-width:         var(--sidebar-width-collapsed);  /* 64px */
  --shell-brand-height:       52px;
  --shell-topbar-height:      var(--topbar-height);            /* 56px */
  --shell-nav-item-height:    29px;
  --shell-nav-icon-size:      17px;
  --shell-control-height:     32px;
  --shell-switcher-height:    40px;
  --shell-env-height:         26px;
  --shell-dot-size:           6px;
  --shell-avatar-size:        26px;
  --shell-workspace-mark:     22px;
  --shell-topbar-icon:        15px;
  --shell-logo-height:        24px;
  --app-text-title:           15px;                            /* card, panel and app-bar titles */
  --app-radius-inner:         8px;                             /* boxes inside a card or sheet */
  --space-3\.5:               14px;                            /* the hand-off's 14px gap/padding step */
  --shell-content-padding:    var(--space-6);                  /* 24px */
  --shell-panel-width:        400px;                           /* side panels: notifications, jobs, Ask */
  --shell-panel-wide-width:   480px;                           /* working drawers: Add a system */

  /* Mobile chrome */
  --shell-appbar-height:      52px;
  --shell-tabbar-height:      82px;                            /* includes the home-indicator area */
  --shell-tabbar-inset:       26px;
  --shell-hit-target:         44px;
  --shell-tab-icon:           22px;

  /* Surfaces, three levels (2026-10-30): the page canvas sits a step below the cards on it, so a
     page reads as sections on a ground rather than text on white; a card's own wells (table heads,
     fact boxes) go back down a step. Text on each keeps WCAG AA: --muted-foreground is 5.8:1 and
     --success 4.6:1 on the light canvas, and every text token clears 4.5:1 on the dark one. */
  --app-canvas:               var(--neutral-100);
  --app-inset:                var(--background);
  --app-row-hover:            var(--neutral-50);
  --shell-sidebar-bg:         var(--sidebar-bg);
  --shell-topbar-bg:          var(--topbar-bg);
  --shell-content-bg:         var(--app-canvas);
  --shell-search-bg:          var(--background);
  --shell-kbd-bg:             var(--card);
  --workspace-mark-bg:        var(--neutral-900);
  --workspace-mark-fg:        var(--primary-foreground);
  --count-attention-bg:       var(--warning-bg);
  --count-attention-fg:       var(--warning-foreground);
  --live-dot:                 var(--success);
  --live-dot-offline:         var(--neutral-400);

  /* Environment switcher — production is always the dark pill */
  --env-production-bg:        var(--neutral-900);
  --env-production-fg:        var(--neutral-50);
  --env-production-border:    var(--neutral-900);
  --env-production-dot:       var(--destructive);
  --env-other-fg:             var(--neutral-800);
  --env-other-border:         var(--neutral-400);
  --env-other-dot:            var(--brand-500);

  /* Ask Inferrex button, open state */
  --ask-active-bg:            var(--brand-50);
  --ask-active-fg:            var(--brand-800);
  --ask-active-border:        var(--brand-300);
  /* Ask Inferrex panel (designs/app/08): a 440px aside beside the page */
  --ask-panel-width:          440px;

  /* StatusPill */
  --status-pill-height:       20px;

  /* StateBlock */
  --state-icon-size:          40px;
  --state-icon-radius:        10px;
  --state-icon-bg:            var(--neutral-200);   /* a step above the canvas, so it shows on cards and on the page */
  --state-icon-fg:            var(--neutral-700);
  --state-message-width:      360px;
  --state-skeleton-bg:        var(--neutral-200);

  /* ConfirmPanel */
  --confirm-width:            440px;
  --confirm-icon-size:        34px;
  --confirm-effects-bg:       var(--background);

  /* Page parts (PageParts.tsx) */
  --mark-size-sm:             28px;
  --mark-size-md:             34px;
  --mark-size-lg:             40px;
  --envchip-size:             18px;

  /* Systems pages (designs/app/02, 03): list panes 248px, inspectors 340px, rows indent 18px a level */
  --sys-objects-width:        248px;
  --sys-inspector-width:      340px;
  --sys-filter-width:         240px;
  --sys-source-width:         280px;
  --sys-field-label-width:    160px;
  --field-indent:             18px;

  /* Mapping pages (designs/app/04): inspector 360px, the link grid's fixed columns */
  --map-inspector-width:      360px;
  --map-check-width:          28px;
  --map-conversion-width:     150px;
  --map-sure-width:           70px;
  --map-state-width:          96px;

  /* SelectionBar (Controls.tsx) — the dark floating bar a list shows while rows are selected */
  --selection-bar-bg:         var(--neutral-900);
  --selection-bar-fg:         var(--neutral-50);
  --selection-bar-divider:    oklch(1 0 0 / 0.2);
  --selection-bar-hover:      oklch(1 0 0 / 0.12);

  /* ListToolbar */
  --list-search-width:        260px;
  --list-chip-height:         28px;
  --list-chip-on-bg:          var(--neutral-900);
  --list-chip-on-fg:          var(--neutral-50);
  --list-chip-off-border:     var(--neutral-400);
}

.dark {
  --app-canvas:               oklch(0.160 0.016 230);
  --app-row-hover:            oklch(0.240 0.018 230);
  --workspace-mark-bg:        var(--brand-300);
  --env-production-bg:        var(--neutral-950);
  --env-production-fg:        var(--neutral-50);
  --env-production-border:    var(--neutral-600);
  --env-other-fg:             var(--foreground);
  --env-other-border:         var(--neutral-600);
  --env-other-dot:            var(--brand-400);
  --ask-active-bg:            oklch(0.835 0.058 220 / 0.12);
  --ask-active-fg:            var(--brand-200);
  --ask-active-border:        var(--brand-600);
  --live-dot-offline:         var(--neutral-600);
  --state-icon-bg:            var(--muted);
  --state-icon-fg:            var(--muted-foreground);
  --state-skeleton-bg:        var(--muted);
  --list-chip-on-bg:          var(--neutral-100);
  --list-chip-on-fg:          var(--neutral-950);
  --list-chip-off-border:     var(--neutral-600);
  --selection-bar-bg:         var(--neutral-100);
  --selection-bar-fg:         var(--neutral-950);
  --selection-bar-divider:    oklch(0 0 0 / 0.15);
  --selection-bar-hover:      oklch(0 0 0 / 0.08);
}

/* dev.inferrex.com — the developer site's own rules. Every colour, size and radius is a design
   token from packages/ui/src/tokens.css, which the build puts ahead of this file. */

* { box-sizing: border-box; }
html { scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.6;
}
a { color: var(--primary); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }

.skip { position: absolute; left: -999rem; }
.skip:focus { left: 1rem; top: 0.5rem; z-index: 10; padding: 0.4rem 0.7rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* ── Top bar ── */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding-block: 0.7rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--background);
  border-bottom: 1px solid var(--border);
}
.top__brand { color: var(--foreground); font-weight: var(--font-weight-semibold); text-decoration: none; letter-spacing: -0.01em; }
.top__brand span { color: var(--muted-foreground); font-weight: var(--font-weight-normal); }
.top__nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: var(--text-base); }
.top__nav a { color: var(--muted-foreground); text-decoration: none; padding-block: 0.2rem; }
.top__nav a:hover, .top__nav a[aria-current] { color: var(--foreground); }
.top__nav a[aria-current] { box-shadow: 0 2px 0 var(--primary); }

/* ── Page frame ── */
.frame {
  max-width: 76rem; margin-inline: auto;
  padding-block: 2rem 4rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.frame--sidebar { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; }
.sidebar { position: sticky; top: 4.5rem; font-size: var(--text-base); }
.sidebar ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.sidebar a { display: block; padding: 0.35rem 0.6rem; border-radius: var(--radius-md); color: var(--muted-foreground); text-decoration: none; }
.sidebar a:hover { color: var(--foreground); background: var(--muted); }
.sidebar a[aria-current] { color: var(--foreground); background: var(--muted); font-weight: var(--font-weight-medium); }
@media (max-width: 56rem) {
  .frame--sidebar { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .sidebar { position: static; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.5rem; }
}

/* ── Running text ── */
.prose { min-width: 0; max-width: 46rem; }
.frame:not(.frame--sidebar) .prose { margin-inline: auto; }
.prose h1 { font-size: var(--text-4xl); line-height: var(--leading-snug); letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; }
.prose h2 { font-size: var(--text-2xl); line-height: 1.25; letter-spacing: -0.01em; margin: 2.5rem 0 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-wrap: balance; }
.prose h3 { font-size: var(--text-xl); line-height: 1.3; margin: 2rem 0 0.5rem; text-wrap: balance; }
.prose p, .prose ul, .prose ol { margin: 0 0 1rem; }
.prose li { margin-bottom: 0.3rem; }
.prose li > p { margin-bottom: 0.4rem; }
.prose code { font-family: var(--font-mono); font-size: 0.86em; background: var(--muted); border-radius: var(--radius-sm); padding: 0.1em 0.3em; overflow-wrap: anywhere; }
.prose pre {
  margin: 0 0 1.25rem; padding: 0.9rem 1rem; overflow-x: auto;
  background: var(--code-bg); color: var(--code-text);
  border: 1px solid var(--code-border); border-radius: var(--radius-lg);
  font-size: var(--text-sm); line-height: 1.55;
}
.prose pre code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }
.prose blockquote { margin: 0 0 1rem; padding: 0.1rem 1rem; border-left: 3px solid var(--border); color: var(--muted-foreground); }
.table-scroll { overflow-x: auto; margin: 0 0 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--text-base); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.prose th { background: var(--muted); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }

/* ── Skills ── */
.skill-meta { color: var(--muted-foreground); font-size: var(--text-base); }
.cards { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.card { margin: 0; padding: 1rem 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.card h2 { font-size: var(--text-xl); margin: 0 0 0.4rem; padding: 0; border: 0; }
.card h2 a { color: var(--foreground); text-decoration: none; }
.card h2 a:hover { color: var(--primary); }
.card p { margin: 0 0 0.6rem; font-size: var(--text-base); }
.card__links { margin: 0; }

/* ── Previous and next ── */
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.pager a { display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none; font-weight: var(--font-weight-medium); }
.pager a span { color: var(--muted-foreground); font-size: var(--text-sm); font-weight: var(--font-weight-normal); }
.pager__next { text-align: right; margin-left: auto; }

.foot {
  border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: var(--text-base);
  padding-block: 1.25rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.foot p { max-width: 76rem; margin: 0 auto; }