/* GENERATED by scripts/sync-design-system.mjs from design-system/ (artifact v59) — do not edit by hand. 2026-09-30 */
/* Operable — generated from tokens.json */
:root, [data-theme="dark"] {
  --teal: #4ECDC4; /* Brand accent for the cover and marketing. The Terminal type, series-5 and the diverging cool pole reference it. */
  --type-terminal: var(--teal); /* Terminal pill and polygon (storage and tank farms are terminals). Teal, the brand accent; 7.8:1 on card. */
  --type-plant: #D4B483; /* Plant pill and polygon (processing plants, fractionators). Sand: the one warm hue that is neither the warning amber nor the primary coral. 7.7:1. New: the app had no colour for Plant. */
  --type-refinery: #E884D3; /* Refinery pill and polygon. Orchid: processing and transformation without borrowing the primary coral; 6.2:1. */
  --type-pipeline: var(--blue-muted); /* Pipeline pill and polygon: the interface blue, so pipeline reads as the network. edge-pipeline shares it. 7.8:1. */
  --type-station: #C9D45C; /* Pump and compressor station pill and polygon. Lime, clear of the warning amber; edge-truck shares it. 9.4:1. */
  --type-rail: #B0BEC5; /* Rail pill and polygon. Silver; edge-rail shares it. 7.9:1. */
  --type-airport: #A9A0F2; /* Airport pill and polygon. Lavender, so it no longer looks like Rail. 6.5:1. */
  --type-default: #7E97A8; /* Pill and polygon for an unknown asset type. Quieter than any real type. 4.9:1. */
  --edge-pipeline: var(--type-pipeline); /* Pipeline edges on the map graph (EDGE_MODE_COLORS). Always the same hue as the pipeline pill. */
  --edge-rail: var(--type-rail); /* Rail edges on the map graph. Matches the rail pill. */
  --edge-marine: #4A9BF0; /* Marine edges (vessel, barge) on the map graph and the Movement connector. Its own value now that Port is gone. */
  --edge-truck: var(--type-station); /* Truck edges on the map graph. Matches the station pill (lime). */
  --coral: #FF867A; /* THE primary action colour: the primary button fill, the selected indicator, input focus and the wordmark. Never for decoration, categories, section headers or information. As text it reads 6.42:1 on card. */
  --coral-hover: #F06B5E; /* Primary button on hover. */
  --coral-active: #D94F43; /* Primary button while pressed. */
  --coral-10: rgba(255,134,122,0.10); /* Coral at 10%: the value behind `accent`. Components use that role. */
  --slate: #2F4858; /* Brand slate. The cover and brand fields only; no component uses it. */
  --slate-800: #1A2832; /* Brand slate, deep. The ground every `card` sits on; components use `card`. */
  --slate-900: #101A21; /* Brand slate, deepest. The app and map ground; components use `background`. */
  --blue-muted: #80BFFF; /* The one interface blue, and the only primitive components name directly: outline-blue tool buttons on the map, identifiers (`data`), the product tag, the progress fill, the pipeline type and series-1. Distinct from `info` (a status). */
  --grey-300: #B1B8BF; /* The value behind `secondary-foreground`. Components use that role. */
  --grey-500: #6B747D; /* The value behind `input` and `disabled-foreground` (3.17:1: a control boundary, never small copy). Components use those roles. */
  --grey-900: #141719; /* The value behind `primary-foreground`: dark ink on coral. Components use that role. */
  --success: #3DBB7D; /* Status only: active, operational, resolved. Never a decorative or brand green. Always pair it with a word or icon. */
  --warning: #F5A623; /* Status only: unverified, attention needed. Also the favourite star (★). */
  --error: #E5493A; /* Status only: critical, failed. The fill behind `destructive`. 3.84:1 on card, below AA for small text: as text use `destructive-foreground`. */
  --error-light: #FF6B6B; /* Error as text and icons: the value behind `destructive-foreground`. Components use that role. */
  --info: #4A9BF0; /* Status only: neutral information, a scheduled or in-transit state, a refresh in progress. Never for tools or data — that is `blue-muted`. */
  --well: rgba(255,255,255,0.04); /* Translucent well: the value behind `secondary` and `disabled`. Components use those roles. */
  --well-hover: rgba(255,255,255,0.08); /* Translucent well, hovered: the value behind `secondary-hover`. Components use that role. */
  --row-divider: rgba(255,255,255,0.03); /* Semantic role. The hairline between repeated rows (table rows, list rows, movements, exceptions): fainter than `border`. */
  --map-origin: var(--coral); /* Map token (base.css). Route origin marker. */
  --map-destination: var(--blue-muted); /* Map token (base.css). Route destination marker. */
  --map-alert: var(--error); /* Map token (base.css). Alert markers and hurricane zones. */
  --map-sensor: var(--warning); /* Map token (base.css). Sensor markers and storm zones. */
  --map-active: var(--success); /* Map token (base.css). Active/operational markers and tropical zones. */
  --map-land: var(--slate-800); /* Map token (base.css). Basemap land fill. */
  --map-water: var(--slate-900); /* Map token (base.css). Basemap water fill. */
  --series-1: var(--blue-muted); /* Chart series 1 (blue). Categorical order is fixed and never cycled: series-1 → series-5, then series-other. Validated on card: worst adjacent CVD ΔE 9.3, normal-vision 22.6, all ≥3:1. */
  --series-2: #E06BC8; /* Chart series 2 (pink). */
  --series-3: var(--type-station); /* Chart series 3 (lime). */
  --series-4: #8B7EEA; /* Chart series 4 (lavender). */
  --series-5: var(--teal); /* Chart series 5 (teal). A sixth series folds into series-other or the chart facets. */
  --series-other: var(--muted-foreground); /* The folded tail ('Other', 'Sum of other grades') and the plan line under an actual. Never a named series. */
  --series-selected: var(--primary); /* The one highlighted series: the selected grade against the sum of others, the hovered series, the asset the card is about. Coral is never a series in its own right. */
  --seq-1: #325A82; /* Sequential ramp, least. One hue (blue) light→dark for magnitude: choropleth, heat cells, cluster density. Validated ordinal: monotone L, steps ≥0.06, 2.1:1 at the low end. */
  --seq-2: #4278AC; /* Sequential ramp. */
  --seq-3: #5497D0; /* Sequential ramp. */
  --seq-4: #66ABEA; /* Sequential ramp. */
  --seq-5: var(--blue-muted); /* Sequential ramp, most. The same blue as series-1, so a magnitude scale and the blue series never share a chart. */
  --div-neg: var(--series-2); /* Diverging pole (warm): below plan, outbound, deficit. Always with a scale legend that says which pole is which. */
  --div-mid: #5B6E7C; /* Diverging midpoint: a neutral grey, never a hue. Reads as 'no difference'. */
  --div-pos: var(--teal); /* Diverging pole (cool): above plan, inbound, surplus. */
  --chart-grid: var(--border); /* Gridlines and axis lines: 1px solid, recessive. Never dashed. */
  --chart-crosshair: var(--muted-foreground); /* The hover crosshair on line and area charts. */
  --chart-limit: var(--foreground); /* A constraint line (tank maximum, minimum stock): 1px, labelled at its right end. */
  --chart-breach: var(--destructive); /* The wash past a limit, at 10%; the fill of a breached bar. */
  --map-select: var(--primary); /* The selection ring on a map feature (2px) and the selected polygon's stroke. */
  --map-hover: var(--foreground); /* Hover stroke on a polygon or edge. */
  --map-halo: var(--background); /* The 2px halo behind map labels and the ring behind markers. */
  --map-cluster: var(--card); /* Cluster disc fill; its ring is border-strong and its count is mono foreground. Size by count, colour never. */
  --map-station: var(--subtle-foreground); /* Fuel stations: the noise layer. Small neutral dots from z10, never coloured by type, so the signal layers (terminals, refineries, pipelines) stay visible. */
  --footer-shade: rgba(0,0,0,0.15); /* Semantic role. The panel footer tint. */
  --scrim: rgba(16,26,33,0.80); /* Semantic role. The modal backdrop (slate-900 at 80%) with a 4px blur. */
  --background: var(--slate-900); /* Semantic role. The app and map ground, behind every panel. */
  --foreground: #E8ECF0; /* Semantic role. Primary text: titles, asset names, values, body copy. 12.69:1 on card. */
  --card: var(--slate-800); /* Semantic role. The ground of every panel, sidebar, drawer, modal and detail card (slate-800). */
  --card-foreground: var(--foreground); /* Semantic role. Text on card. */
  --popover: var(--card); /* Semantic role. Dropdowns, menus, tooltips and popovers. Same ground as a card, edged with `border-strong`. */
  --popover-foreground: var(--foreground); /* Semantic role. Text on popover. */
  --primary: var(--coral); /* Semantic role. The primary action fill and the selected/active indicator. One primary action per panel. */
  --primary-hover: var(--coral-hover); /* Semantic role. Primary on hover. primary-foreground on it is 5.98:1. */
  --primary-active: var(--coral-active); /* Semantic role. Primary while pressed (100ms). primary-foreground on it is 4.42:1, just under AA, but it's only shown during the press. */
  --primary-foreground: var(--grey-900); /* Semantic role. Text and icons on a primary fill: dark ink, 7.67:1 on coral. Replaces the source's white (2.35:1). */
  --secondary: var(--well); /* Semantic role. The ghost/secondary button fill. */
  --secondary-hover: var(--well-hover); /* Semantic role. The ghost/secondary button on hover. */
  --secondary-foreground: var(--grey-300); /* Semantic role. Ghost/secondary button text. 7.52:1 on card. */
  --muted: #212F3A; /* Semantic role. Raised or subdued regions inside a card: hovered rows, read-only fields, cards within panels. */
  --muted-foreground: #8DA3B2; /* Semantic role. Secondary text: field labels, section headings, descriptions, table cells, captions. 4.94:1 on card. 5.2:1 on muted, 5.8:1 on card (was text-secondary at 4.5:1). */
  --subtle-foreground: #9098A1; /* Semantic role. The quietest readable text and resting icons: placeholders, metadata, timestamps. 4.83:1 on card, 4.39:1 on muted. 4.7:1 on muted, 5.2:1 on card (was grey-400 at 4.3:1). */
  --accent: var(--coral-10); /* Semantic role. The one selected-state wash: active nav item, selected tool, chosen row, active tab. Replaces the five per-view accent colours. */
  --accent-foreground: var(--coral); /* Semantic role. Text and icons in a selected item: coral as text, 6.42:1 on card. */
  --border: #243845; /* Semantic role. The default hairline: dividers inside panels, table and row rules, tag and badge edges, the rule between favourites and the rest of a list, toolbar separators. */
  --border-strong: #2E4050; /* Semantic role. The outer edge of a panel, popover or modal. */
  --input: var(--grey-500); /* Semantic role. Input, select and textarea borders. 3.17:1 on card: meets the 3:1 floor for a control boundary (the app's map-border was 1.3:1). */
  --ring: var(--coral); /* Semantic role. The keyboard focus ring: 2px solid on :focus-visible. 6.42:1 on card, 7.5:1 on background. */
  --destructive: var(--error); /* Semantic role. Destructive and error fills, tints and markers. */
  --destructive-foreground: var(--error-light); /* Semantic role. Error text and icons: inline field errors, danger-button labels, critical badges. */
  --disabled: var(--well); /* Semantic role. Fill of a disabled control. */
  --disabled-foreground: var(--grey-500); /* Semantic role. Text of a disabled control: readable but clearly unavailable (3.17:1). Replaces opacity 0.4. */
  --sp-pair: 2px; /* Inside a pair: a label above its value, a status dot beside its word. The tightest rung of the proximity ladder. */
  --sp-1: 4px; /* Inset of 28px controls (vertical), and the space either side of a list-separator line. */
  --sp-icon: 6px; /* Inside an item: an icon and its label, a badge and the name after it. */
  --sp-2: 8px; /* Between items in a group: pills in a row, fields in a form, rows of a key/value grid. Inset of popovers, menus, tooltips and list rows (vertical). */
  --sp-3: 12px; /* Between groups in a row or card: a key/value grid's column gap, a section heading and its content. Inset of wells and 36px controls (horizontal). */
  --sp-4: 16px; /* Inset of a panel, card or drawer body. */
  --sp-5: 24px; /* Between sections of a panel; inset of a modal body. */
  --sp-6: 32px; /* Between major blocks of a page. */
  --r-sm: 4px; /* Compact elements: type pills, inline code, the product tag. */
  --r-control: 6px; /* Every control: buttons (all variants), inputs, selects, textareas, icon buttons and nav items. Equivalent controls share it. */
  --r-md: 8px; /* Cards, dropdowns, popovers and tooltips. */
  --r-lg: 12px; /* Panels, modals and overlay containers. It drops to 0 on edges that meet the viewport (mobile sheets). */
  --r-full: 9999px; /* Pills and circles only: status badges, tags, avatars and status dots. */
  --z-map: 0; /* Map layers (0–99). */
  --z-map-controls: 100; /* Map controls and toolbars (100–199). */
  --z-panel: 200; /* Panels and sidebars (200–999). */
  --z-modal: 1000; /* Modals and overlays (1000–8999). */
  --z-critical: 9000; /* Critical overlays and the modal backdrop (9000+). */
  --duration-fast: 100ms; /* Button press and pressed states. */
  --duration-default: 150ms; /* Hover, focus and colour changes; tooltips. */
  --duration-moderate: 200ms; /* Dropdowns, popovers, dialogs, toasts and accordions. */
  --duration-slow: 300ms; /* Sheets and drawers sliding from their edge; the loader fade (the source used 320ms). */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* Every UI transition. No bounce, elastic or overshoot. */
  --font-primary: Avenir, "Nunito Sans", -apple-system, sans-serif;
  --font-wordmark: Comfortaa, "Nunito Sans", sans-serif;
  --font-mono: "Fira Code", "SF Mono", Consolas, monospace;
  --text-page-title: 700 24px/32px var(--font-primary); /* The title of a full page or workbench view. Bold (700): the only bold text in the product apart from the wordmark. */
  --text-stat: 600 24px/32px var(--font-primary); /* A StatTile's value: the one number a tile shows. Tabular figures like every number; the unit beside it in `label`. */
  --text-hero: 600 48px/56px var(--font-primary); /* The one hero figure a view leads with (StatTile `.is-hero`). Exactly one per view; tabular figures. */
  --text-panel-title: 600 16px/24px var(--font-primary); /* The title of a panel, modal or detail card, in sentence case. Semibold (600) in `foreground`. */
  --text-section-heading: 500 13px/18px var(--font-primary); /* Section headings, column headers and metadata group labels, in sentence case. Medium (500) in `muted-foreground`: colour and position set them apart, not weight. */
  --text-body: 400 14px/20px var(--font-primary); /* Body copy, values and input text. In `foreground`. */
  --text-label: 400 13px/18px var(--font-primary); /* Field labels, table cells and dense list text. In `muted-foreground`. */
  --text-number: 400 13px/18px var(--font-primary); /* Quantities, prices, dates, times and percentages: the primary face with tabular lining figures (`font-variant-numeric: tabular-nums`), right-aligned in tables. Numbers are not code — they never wear mono. Weight 500 for the one value a row is scanned for. */
  --text-list-item: 500 13px/18px var(--font-primary); /* Asset name + operator code in the sidebar and every dropdown. Medium (500): the one thing on a row you scan for. The same size, weight and colour (`foreground`) for both parts. */
  --text-button: 600 13px/18px var(--font-primary); /* Button labels, in sentence case. Semibold (600), the weight reserved for controls and titles. */
  --text-caption: 400 12px/16px var(--font-primary); /* Captions, metadata and helper and error lines. The smallest size in the product. In `subtle-foreground` (errors in `destructive-foreground`). */
  --text-badge: 500 12px/16px var(--font-primary); /* Badge, type pill and tag text, in sentence case. Medium (500). */
  --text-data: 400 12px/16px var(--font-mono); /* Identifiers only: coordinates, UUIDs, operator codes, references, API keys, inline code and diffs — things read character by character, where 0/O and 1/l must never be confused. In `blue-muted`. Never for quantities, dates or times (those are `number`), never for UI copy. */
  --text-product-tag: 500 12px/16px var(--font-mono); /* The product tag beside the wordmark (GEO, Traverse). It's part of the logo lockup, so it keeps its caps. */
  --text-wordmark: 700 22px/1 var(--font-wordmark); /* The lowercase 'operable' wordmark, in `coral`. Comfortaa is for the brand mark only: never headings, empty states, onboarding or splash copy. */
}
/* Type styles: use the --text-* shorthands (font: var(--text-label)); the .label/.body/… classes are deliberately not emitted here. */