/* ============================================================================
   LiftMaster AI — design tokens
   ----------------------------------------------------------------------------
   Generated from DESIGN.md (§2 colour, §3 typography, §5 grid, §6 elevation).
   This is the only file in the client permitted to contain a literal colour,
   size or shadow. Component styles reference tokens exclusively; a hex value
   anywhere else is a defect, because it is the one that drifts when the palette
   is corrected.

   Light mode only. There is no dark theme and no theme toggle: this is a
   control-room surface that is read next to a SCADA screen and printed for
   approval packs, and a theme that changes meaning-bearing signal colours
   between environments is a safety problem before it is a preference.
   ========================================================================== */

:root {
  /* ── Canvas & surface ─────────────────────────────────────────────────── */
  --color-bg: #f6f7f9;
  --color-bg-rgb: 246, 247, 249;
  --color-surface: #ffffff;
  --color-surface-rgb: 255, 255, 255;
  --color-surface-sunken: #eef1f5;
  --color-surface-sunken-rgb: 238, 241, 245;
  --color-surface-raised: #ffffff;

  /* ── Borders & rules ──────────────────────────────────────────────────── */
  --color-border: #e3e7ed;
  --color-border-rgb: 227, 231, 237;
  --color-border-strong: #c7cfd9;
  --color-border-strong-rgb: 199, 207, 217;
  --color-rule-heavy: #111827;
  --color-rule-heavy-rgb: 17, 24, 39;

  /* ── Ink ──────────────────────────────────────────────────────────────── */
  --color-text: #101828;
  --color-text-rgb: 16, 24, 40;
  --color-text-secondary: #556072;
  --color-text-secondary-rgb: 85, 96, 114;
  --color-text-muted: #8792a4;
  --color-text-muted-rgb: 135, 146, 164;
  --color-text-inverse: #ffffff;
  --color-text-inverse-rgb: 255, 255, 255;

  /* ── Primary ──────────────────────────────────────────────────────────── */
  --color-primary: #0e6e7d;
  --color-primary-rgb: 14, 110, 125;
  --color-primary-hover: #0a5a66;
  --color-primary-hover-rgb: 10, 90, 102;
  --color-primary-active: #08484f;
  --color-primary-active-rgb: 8, 72, 79;
  --color-primary-soft: #e6f1f3;
  --color-primary-soft-rgb: 230, 241, 243;
  --color-primary-soft-hover: #d3e7ea;
  --color-primary-on-soft: #0a5a66;

  /* ── Accent (data visualisation) ──────────────────────────────────────── */
  --color-accent: #2e8fa3;
  --color-accent-rgb: 46, 143, 163;
  --color-accent-2: #7a6bc4;
  --color-accent-2-rgb: 122, 107, 196;
  --color-accent-3: #c77d0a;
  --color-accent-3-rgb: 199, 125, 10;

  /* ── Domain signal scale ──────────────────────────────────────────────── */
  --color-signal-safe: #1f7a4d;
  --color-signal-safe-rgb: 31, 122, 77;
  --color-signal-safe-soft: #e7f4ec;
  --color-signal-safe-soft-rgb: 231, 244, 236;

  --color-signal-watch: #b45309;
  --color-signal-watch-rgb: 180, 83, 9;
  --color-signal-watch-soft: #fdf1e3;
  --color-signal-watch-soft-rgb: 253, 241, 227;

  --color-signal-alarm: #bc2c2c;
  --color-signal-alarm-rgb: 188, 44, 44;
  --color-signal-alarm-soft: #fbebeb;
  --color-signal-alarm-soft-rgb: 251, 235, 235;
  --color-signal-alarm-strong: #a02020;
  --color-signal-safe-strong: #17603c;

  --color-signal-unknown: #5b6472;
  --color-signal-unknown-rgb: 91, 100, 114;
  --color-signal-unknown-soft: #eef1f5;

  /* ── AI-assisted marker — reserved, sole use ──────────────────────────── */
  --color-ai: #6a5acd;
  --color-ai-rgb: 106, 90, 205;
  --color-ai-soft: #f0edfc;

  /* ── Gradients — hero and chart fills only ────────────────────────────── */
  --gradient-signature: linear-gradient(135deg, #0e6e7d 0%, #2e8fa3 52%, #7a6bc4 100%);
  --gradient-hero-glow: radial-gradient(
    1100px 520px at 78% -10%,
    rgba(46, 143, 163, 0.2) 0%,
    rgba(246, 247, 249, 0) 68%
  );
  --gradient-boundary: linear-gradient(90deg, #1f7a4d 0%, #b45309 62%, #bc2c2c 100%);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --font-sans-cjk: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans SC', 'Noto Sans',
    sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-display-1: 64px;
  --fs-display-2: 44px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 19px;
  --fs-h4: 16px;
  --fs-body: 15px;
  --fs-ui: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-metric-lg: 34px;
  --fs-metric: 22px;
  --fs-code: 12.5px;

  /* ── Space ────────────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --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;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --container-max: 1200px;
  --container-prose: 820px;
  --container-wide: 1600px;

  /* ── Elevation — border-first in light mode ───────────────────────────── */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 2px 6px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-3: 0 8px 20px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.04);
  --shadow-4: 0 20px 44px rgba(16, 24, 40, 0.12), 0 4px 12px rgba(16, 24, 40, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(16, 24, 40, 0.05);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-signature: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-instant: 0.12s;
  --dur-fast: 0.18s;
  --dur-base: 0.28s;
  --dur-slow: 0.5s;

  --z-rail: 10;
  --z-topbar: 20;
  --z-dropdown: 30;
  --z-modal: 40;
  --z-toast: 50;
}

/* ============================================================================
   Base reset (§4.1)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

[id] {
  scroll-margin-top: 88px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 var(--fs-ui) / 1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}