/*
 * Design tokens — the ONLY place for colours, typography, spacing, radii, shadows,
 * component-state values and the grain texture. Components and views use these variables.
 * Brand: Jabil blue #005288 (third-party reference, pending the client's official brand guide).
 */
:root {
  /* Brand */
  --brand-900: #00233d;
  --brand-800: #00365c;
  --brand-700: #005288; /* Jabil blue */
  --brand-600: #1667a0;
  --brand-500: #3d84b8;
  --brand-100: #e3edf5;
  --brand-50: #f1f6fa;
  --accent-teal: #006b79;
  --accent-green: #008a5f;

  /* Warm neutrals */
  --neutral-0: #ffffff;
  --neutral-50: #f7f6f3;
  --neutral-100: #efede8;
  --neutral-200: #e2dfd8;
  --neutral-300: #cdc9c0;
  --neutral-500: #8a8f93;
  --neutral-600: #5e676e;
  --neutral-800: #27323a;
  --neutral-900: #172129;

  /* Semantic status */
  --status-running: #00855b;
  --status-running-bg: #e3f3ec;
  --status-stopped: #b4402f;
  --status-stopped-bg: #f8e7e3;
  --status-unknown: #a26a12;
  --status-unknown-bg: #f7eedd;
  --status-unknown-text: #6f4a0c;
  --status-sample: #f0c36b; /* "example signals" indicator */
  --status-info: var(--brand-700);
  --status-info-bg: var(--brand-100);

  /* Data visualisation series (ordered; colour-blind friendly, brand-led) */
  --chart-1: #2a78c2; /* lighter than brand blue: categorical series need mid lightness */
  --chart-2: #c4700f; /* darker orange for >= 3:1 contrast on white */
  --chart-3: #008a5f;
  --chart-4: #8e5ba8;
  --chart-5: #c2463b;
  --chart-6: #3d9fc4;
  --chart-grid: #e2dfd8;
  --chart-axis: #8a8f93;

  /* Surfaces and text */
  --bg: var(--neutral-50);
  --surface: var(--neutral-0);
  --surface-2: var(--neutral-100);
  --surface-inverse: var(--brand-900);
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --text: var(--neutral-900);
  --text-muted: var(--neutral-600);
  --text-subtle: var(--neutral-500);
  --text-inverse: #f3f7fa;

  /* Typography (system stacks: the build must work offline from file://) */
  --font-sans: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 650;
  --tracking-caps: 0.08em;

  /* Spacing scale (4 px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(23 33 41 / 0.06), 0 1px 1px rgb(23 33 41 / 0.04);
  --shadow-md: 0 4px 14px rgb(23 33 41 / 0.08), 0 1px 3px rgb(23 33 41 / 0.06);
  --shadow-lg: 0 16px 40px rgb(23 33 41 / 0.14);

  /* Component states */
  --state-hover-bg: var(--brand-50);
  --state-hover-border: var(--brand-500);
  --state-active-bg: var(--brand-700);
  --state-active-text: var(--neutral-0);
  --state-pressed-scale: 0.98;
  --state-disabled-opacity: 0.45;
  --focus-ring-color: #0a6fb3;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring-color);
  --focus-ring-inverse: 0 0 0 2px var(--brand-900), 0 0 0 4px #9fd0f2;
  --transition-fast: 120ms ease-out;
  --transition-med: 200ms ease-out;

  /* Layout */
  --header-h: 60px;
  --tabbar-h: 48px;
  --rail-w: 300px;

  /* Grain: subtle SVG noise over gradients (warmth + no colour banding). 0 disables it. */
  --grain-opacity: 0.06;
  --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --gradient-header: linear-gradient(
    105deg,
    var(--brand-900) 0%,
    var(--brand-800) 55%,
    var(--brand-700) 100%
  );
  --gradient-viewer: radial-gradient(ellipse at 50% 40%, #e9eef0, #cfd8dc 75%);
  --gradient-surface: linear-gradient(180deg, var(--neutral-0) 0%, var(--neutral-50) 100%);
}

@media (max-width: 900px) {
  :root {
    --header-h: 56px;
    --rail-w: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-med: 0ms;
  }
}