/* Generated by scripts/build-tokens.mjs from tokens/tokens.json.
   Don't edit by hand: change tokens/tokens.json and run `npm run tokens`. */

:root {
  color-scheme: dark;

  /* color.surface */
  --color-surface-bg: #0a0e11; /* Page background and the full-screen 3D viewport. */
  --color-surface-base: #0e1418; /* Panels that sit on the page: design system examples, line-card strip on small screens. */
  --color-surface-raised: #131a1f; /* Cards and boxes that sit on a panel. */
  --color-surface-overlay: rgba(14, 20, 24, 0.86); /* Floating panels over the 3D view. */
  --color-surface-overlay-subtle: rgba(10, 14, 17, 0.72); /* Small chips over the 3D view: HUD, scanner status, labels. */
  --color-surface-float: rgba(14, 20, 24, 0.9); /* Floating containers over the 3D view: app bar, side panel, line-card dock, and the overview's top and bottom bars. */
  --color-surface-card: rgba(14, 20, 24, 0.8); /* Overview cards. Each card floats on its own over the 3D view, because the overview column itself has no background. */
  --color-surface-card-strong: rgba(19, 26, 31, 0.92); /* Overview cards on hover, and tables inside them, so text stays legible over bright smoke. */

  /* color.text */
  --color-text: #ece8db; /* Primary text. */
  --color-text-muted: #8b938f; /* Labels, captions, secondary text. */
  --color-text-on-accent: #151004; /* Text on solid accent fills. */
  --color-text-on-alarm: #1a0705; /* Text on solid alarm fills. */

  /* color.border */
  --color-border: #20292f; /* Dividers and table rules. */
  --color-border-strong: #2d3840; /* Panel and control outlines. */
  --color-border-highlight: #ffffff; /* Hover outline for a production line, on its card and in 3D. */

  /* color.accent */
  --color-accent: #f7c948; /* Sci-fi yellow. The one accent: active states, data, outlines in the 3D drawing. */
  --color-accent-subtle: rgba(247, 201, 72, 0.12); /* Tinted backgrounds, such as copilot replies. */
  --color-accent-border: rgba(247, 201, 72, 0.45); /* Accent outlines on dark controls. */

  /* color.status */
  --color-status-alarm: #ff5a4e; /* Reserved for permit-limit breaches and destructive actions. */
  --color-status-alarm-subtle: rgba(255, 90, 78, 0.14); /* Alarm backgrounds and glows. */
  --color-status-warning: #ff9d3d; /* Transitional states (shutting down, starting) and kiln upsets. */

  /* color.chart */
  --color-chart-1: var(--color-accent); /* First series (Line 1). */
  --color-chart-2: #ff8a3d; /* Second series (Line 2). */
  --color-chart-3: #9fb3c8; /* Third series. */
  --color-chart-4: #d9d4c4; /* Fourth series. */

  /* color.emission */
  --color-emission-low: var(--color-accent); /* Emission scale, normal. Used by smoke and fence sensors. */
  --color-emission-mid: #ff8a3d; /* Emission scale, elevated. */
  --color-emission-high: #ff4a3d; /* Emission scale, over the limit. */

  /* color.scene */
  --color-scene-ground: #0c1114; /* 3D ground plane. */
  --color-scene-fill: #0e1418; /* Flat fill behind every 3D outline. */
  --color-scene-fill-selected: #3a300c; /* Fill of a selected production line. */
  --color-scene-outline: var(--color-accent); /* 3D outlines. */
  --color-scene-outline-hover: var(--color-border-highlight); /* 3D outline of a hovered production line. */

  /* color.print */
  --color-print-header: #0e1418; /* PDF report header band. */
  --color-print-header-text: #e1e1dc; /* PDF header body text. */
  --color-print-accent: var(--color-accent); /* PDF title and section rules. */
  --color-print-text: #1c2024; /* PDF body text. */
  --color-print-muted: #697074; /* PDF labels and footers. */
  --color-print-rule: #e1e4e6; /* PDF table rules. */
  --color-print-table-head: #eef0f1; /* PDF table header fill. */
  --color-print-flag: #be2d23; /* PDF values that need a regulator's attention. */

  /* font.family */
  --font-family-display: "Chakra Petch", Archivo, "Helvetica Neue", sans-serif; /* Headings, figures, labels, buttons. */
  --font-family-body: Archivo, "Helvetica Neue", Arial, sans-serif; /* Running text. */
  --font-family-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Code samples in the design system docs. */

  /* font.weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* font.size */
  --font-size-root: 14.5px; /* Body text size. */
  --font-size-2xs: 0.7rem; /* Pills, badges, sub-labels. */
  --font-size-xs: 0.77rem; /* Captions, status chips, timestamps. */
  --font-size-sm: 0.82rem; /* Log rows, table cells, buttons. */
  --font-size-md: 0.87rem; /* Chat messages, suggestions, tabs. */
  --font-size-lg: 0.95rem; /* Card titles. */
  --font-size-xl: 1.12rem; /* Card figures, app title. */
  --font-size-2xl: 1.35rem; /* Floating stats, page titles. */
  --font-size-3xl: 1.75rem; /* KPI figures. */

  /* font.tracking */
  --font-tracking-tight: 0.01em;
  --font-tracking-normal: 0.02em; /* Display type default. */
  --font-tracking-wide: 0.03em; /* Small display labels. */
  --font-tracking-wider: 0.04em; /* The clock. */

  /* shape */
  --shape-border-width: 1px;
  --shape-rule-width: 2px; /* Accent rules on the left edge of chips and messages. */
  --shape-frame-corner: 10px; /* Size of the yellow corner brackets on framed panels. */
  --shape-frame-stroke: 2px; /* Stroke of the corner brackets. */
  --shape-chamfer: 7px; /* Cut corner on buttons. */
  --shape-float-radius: 2px; /* Corner radius of floating containers. Kept near-square so the corner brackets still read. */

  /* layout */
  --layout-float-gap: 12px; /* Gap between floating containers and the screen edge, and between each other. */
  --layout-bar-height: 52px; /* Height of the floating app bar. */
  --layout-panel-width: clamp(340px, 28vw, 440px); /* Width of the expanded right side panel (copilot and event log). */
  --layout-panel-rail: 52px; /* Width of the right side panel when collapsed to a rail. */
  --layout-dash-width: clamp(320px, 25vw, 400px); /* Width of the expanded overview column on the left. */
  --layout-dash-rail: var(--layout-panel-rail); /* Width of the overview column when collapsed to a rail. Matches the right panel's rail. */
  --layout-dash-card-gap: 8px; /* Space between cards in the overview column. */
  --layout-dash-fade: 28px; /* Length of the fade where scrolling cards disappear under the overview's top and bottom bars. */
  --layout-breakpoint: 860px; /* Below this width the layout stacks and containers stop floating. CSS media queries can't read variables, so console.css repeats this value. */

  /* effect */
  --effect-blur-overlay: 4px; /* Backdrop blur behind small overlays (floating stats). */
  --effect-blur-float: 14px; /* Backdrop blur behind floating containers. */
  --effect-scanline-opacity: 0.022; /* Strength of the scanline texture over the 3D view. */
  --effect-vignette-opacity: 0.45; /* Darkening at the edges of the 3D view. */

  /* elevation */
  --elevation-float: 0px 18px 44px -12px rgba(0, 0, 0, 0.75), 0px 2px 8px 0px rgba(0, 0, 0, 0.45); /* Drop shadow for floating containers: app bar, side panel, line-card dock, overview top and bottom bars. */
  --elevation-raised: 0px 6px 18px -6px rgba(0, 0, 0, 0.6); /* Smaller shadow for chips and stats that float over the 3D view. */
  --elevation-card: 0px 10px 24px -10px rgba(0, 0, 0, 0.7), 0px 1px 3px 0px rgba(0, 0, 0, 0.4); /* Shadow for each card in the overview column, so it separates from the 3D view without a container behind it. */
  --elevation-rim: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.04); /* Faint top highlight inside floating containers, so their edge reads against dark scenery. */

  /* scene */
  --scene-grid-opacity: 0.07; /* Ground grid lines. */
  --scene-dim-outline-opacity: 0.4; /* Secondary 3D outlines: stockpiles, kiln supports, fence posts. */
  --scene-scanner-opacity: 0.255; /* Air scanner disc, before its radial fade. */
  --scene-plume-opacity: 0.6; /* Smoke particles. */
  --scene-plume-brightness: 0.5; /* Smoke colour multiplier. Particles blend additively, so lower is fainter. */
  --scene-view-height: 200; /* World units visible vertically at default zoom (orthographic camera). */

  /* motion */
  --motion-scanner-period: 10s; /* One full turn of the air scanner, and the interval of a full air pass. */
  --motion-panel: 240ms; /* Side panel and overview column collapse and expand, and the 3D view re-centring with them. */
  --motion-fade: 160ms; /* Scroll-edge fades in the overview column appearing and disappearing. */
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* Easing for panel and container transitions. */
}