/* Roboto variable is served from the Google Fonts CDN. The design export
   bundled it as a local TTF, but that file exceeds the export size cap, so we
   use the CDN copy of the same family instead. JetBrains Mono is already loaded
   from the same CDN via a <link> in each page head; CSP allows fonts.gstatic.com. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ============================================================
   VAKIO DESIGN SYSTEM
   colors_and_type.css — Foundational design tokens
   ============================================================

   Vakio is cold-chain intelligence for retail refrigeration.
   The palette is INDUSTRIAL: Dark Cyan #024558 anchor with
   cool cyan-tinted navy steel neutrals. Professional
   instrumentation aesthetic — precise, calm, trustworthy.

   Amber + red are used SPARINGLY for warnings and alarms.

   The source-of-truth tokens live in the Vakio platform at
   apps/web/src/index.css as Tailwind v4 @theme tokens. This
   file mirrors them as plain CSS variables for design artifacts.
   ============================================================ */

:root {
  /* ──────────────────────────────────────────────────────────
     PRIMITIVE PALETTE — Vakio brand scales
     ────────────────────────────────────────────────────────── */

  /* Cyan — primary action, the brand colour.
     Anchored on #024558 Dark Cyan; scales up to bright
     instrumentation cyan and down to near-black navy-cyan. */
  --cyan-950: #061520; /* Near-black navy-cyan — dark canvas */
  --cyan-900: #091e2b; /* Deep navy — primary text */
  --cyan-800: #0c2233; /* Dark surface */
  --cyan-700: #133346; /* Raised dark surface */
  --cyan-600: #024558; /* Dark Cyan — brand anchor, primary action */
  --cyan-500: #025e78; /* Primary hover */
  --cyan-400: #027898; /* Primary active */
  --cyan-350: #0b7ea5; /* Secondary — bright teal */
  --cyan-300: #0994c0;
  --cyan-250: #1aadd6; /* Bright instrumentation cyan (dark-mode primary) */
  --cyan-200: #3dc0e3;
  --cyan-150: #72d5ed;
  --cyan-100: #dff0f5; /* Primary subtle fill */
  --cyan-50: #e4f5fb; /* Secondary subtle fill */

  /* Steel — balanced neutrals with a whisper of cyan (Option B) */
  --steel-900: #13202a; /* Near-navy text */
  --steel-800: #3b4a55; /* Secondary text */
  --steel-700: #2a4151;
  --steel-600: #7c8893; /* Tertiary text, strong borders */
  --steel-500: #4e6c7c;
  --steel-400: #99a6b0;
  --steel-300: #b7bfc7; /* Default borders */
  --steel-200: #c5ccd2; /* Disabled text */
  --steel-100: #d6dce1; /* Subtle borders, skeletons */
  --steel-50: #eceff2; /* Subtle bg */
  --steel-25: #f4f6f8; /* Default / canvas bg */

  /* Amber — warnings (sparingly) */
  --amber-900: #3d2000;
  --amber-800: #5c3508;
  --amber-700: #a86a10;
  --amber-600: #c47a10; /* Warning icon */
  --amber-500: #e09830;
  --amber-400: #e8a020; /* Warning border */
  --amber-300: #f0b040;
  --amber-200: #fac775;
  --amber-100: #fdf2e0; /* Warning bg tint */

  /* Red — critical alarms */
  --red-900: #3a0808;
  --red-800: #5a1010;
  --red-700: #8a2828;
  --red-600: #b82828; /* Critical icon */
  --red-500: #c03030;
  --red-400: #d94040; /* Critical border */
  --red-300: #e05050;
  --red-200: #f5a0a0;
  --red-100: #fbe9e9; /* Error bg tint */

  /* Success — green (semantic only, not brand) */
  --green-900: #062b18;
  --green-700: #064e30;
  --green-500: #0f9952;
  --green-400: #2ec87a;
  --green-300: #5ac48a;
  --green-200: #7edba8;
  --green-100: #e6f5ee;

  --white: #ffffff;
  --black: #061520; /* Near-black navy-cyan — brand dark, not pure black */

  /* ──────────────────────────────────────────────────────────
     SEMANTIC TOKENS — LIGHT (default) — cool cyan-tinted steel
     ────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --bg-canvas: #eff4f7; /* Page canvas — cool cyan-tinted steel */
  --bg-subtle: #e4edf2; /* Subtle surface */
  --bg-surface: #ffffff; /* Cards, panels */
  --bg-surface-raised: #eff4f7; /* Raised surfaces */
  --bg-overlay: rgba(6, 21, 32, 0.55);

  /* Text */
  --fg-primary: #091e2b; /* Deep navy with cyan undertone */
  --fg-secondary: #2f5060; /* Muted copy */
  --fg-tertiary: #6a8fa0; /* Labels, captions */
  --fg-disabled: #b8cdd7;
  --fg-inverse: #ffffff;
  --fg-on-primary: #ffffff; /* On Dark Cyan action */
  --fg-on-warning: #5c3508;
  --fg-on-critical: #ffffff;

  /* Borders */
  --border-subtle: #ccdde6; /* Dividers */
  --border-default: #aabfcc; /* Inputs, cards */
  --border-strong: #6a8fa0; /* Emphasised borders */

  /* Primary action — Dark Cyan #024558 */
  --action-primary: #024558;
  --action-primary-hover: #025e78;
  --action-primary-active: #027898;
  --action-primary-subtle: #dff0f5;
  --action-primary-on-subtle: #024558;

  /* Secondary action — brighter teal for contrast */
  --action-secondary: #0b7ea5;
  --action-secondary-hover: #0994c0;
  --action-secondary-active: #07b3e2;
  --action-secondary-subtle: #e4f5fb;

  /* Semantic — Success (steady, confident) */
  --success-bg: #e6f5ee;
  --success-border: #5ac48a;
  --success-text: #064e30;
  --success-icon: #0f9952;
  --success-solid: #0f9952;

  /* Semantic — Warning (amber, calm) */
  --warning-bg: #fdf2e0;
  --warning-border: #e8a020;
  --warning-text: #5c3508;
  --warning-icon: #c47a10;
  --warning-solid: #c47a10;

  /* Semantic — Critical (red, rare) */
  --critical-bg: #fbe9e9;
  --critical-border: #d94040;
  --critical-text: #5a1010;
  --critical-icon: #b82828;
  --critical-solid: #b82828;

  /* Semantic — Info (teal) */
  --info-bg: #dff0f5;
  --info-border: #3aaac8;
  --info-text: #024558;
  --info-icon: #0b7ea5;

  /* Data / device status */
  --status-online: #0f9952; /* Healthy green */
  --status-offline: #6a8fa0; /* Cool steel — not alarming */
  --status-warning: #c47a10; /* Amber */
  --status-critical: #b82828; /* Red */
  --status-idle: #72d5ed; /* Light cyan — standby */

  /* Interaction states */
  --state-hover: #e4edf2;
  --state-active: #ccdde6;
  --state-focus-ring: #0b7ea5;
  --state-skeleton: #ccdde6;

  /* ──────────────────────────────────────────────────────────
     TYPE — FAMILIES
     ────────────────────────────────────────────────────────── */
  /* Vakio brand sans is Roboto Variable (wdth + wght axes).
     Loaded from assets/fonts. JetBrains Mono carries numerics
     and code. */

  --font-sans:
    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
    Arial, sans-serif;
  --font-display:
    'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:
    'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono',
    monospace;

  /* Tabular for telemetry readings */
  --font-numeric: 'JetBrains Mono', 'SF Pro Display', ui-monospace, monospace;

  /* ──────────────────────────────────────────────────────────
     TYPE — SCALE (8-step)
     ────────────────────────────────────────────────────────── */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-display: 48px;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Letter-spacing */
  --ls-tighter: -0.02em;
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-uppercase: 0.08em;

  /* ──────────────────────────────────────────────────────────
     SPACING — 4pt base
     ────────────────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 64px;
  --space-16: 96px;

  /* ──────────────────────────────────────────────────────────
     RADIUS
     ────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ──────────────────────────────────────────────────────────
     ELEVATION — Flat. Industrial. Navy-cyan tinted shadows.
     ────────────────────────────────────────────────────────── */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(9, 30, 43, 0.05);
  --shadow-sm: 0 1px 2px rgba(9, 30, 43, 0.07), 0 1px 3px rgba(9, 30, 43, 0.05);
  --shadow-md: 0 2px 6px rgba(9, 30, 43, 0.08), 0 1px 3px rgba(9, 30, 43, 0.06);
  --shadow-lg: 0 6px 16px rgba(9, 30, 43, 0.1);
  --shadow-focus: 0 0 0 3px rgba(11, 126, 165, 0.4);

  /* ──────────────────────────────────────────────────────────
     MOTION — Calm, precise, minimal
     ────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   DARK MODE — near-black navy-cyan canvas
   ============================================================ */
.dark,
[data-theme='dark'] {
  --bg-canvas: #061520;
  --bg-subtle: #061520;
  --bg-surface: #0c2233;
  --bg-surface-raised: #133346;
  --bg-overlay: rgba(3, 8, 15, 0.88);

  --fg-primary: #e2f2f9;
  --fg-secondary: #6fb8d4;
  --fg-tertiary: #2e7a99;
  --fg-disabled: #0c2233;
  --fg-inverse: #061520;

  --border-subtle: #0c2233;
  --border-default: #133346;
  --border-strong: #1d4f6b;

  --action-primary: #1aadd6;
  --action-primary-hover: #3dc0e3;
  --action-primary-active: #72d5ed;
  --action-primary-subtle: #061c2d;
  --action-primary-on-subtle: #72d5ed;

  --action-secondary: #0b7ea5;
  --action-secondary-hover: #1aadd6;
  --action-secondary-active: #3dc0e3;
  --action-secondary-subtle: #051524;

  --success-bg: #062b18;
  --success-border: #0f9952;
  --success-text: #7edba8;
  --success-icon: #2ec87a;

  --warning-bg: #3d2000;
  --warning-border: #a86a10;
  --warning-text: #f0b040;
  --warning-icon: #e09830;

  --critical-bg: #3a0808;
  --critical-border: #c03030;
  --critical-text: #f5a0a0;
  --critical-icon: #e05050;

  --info-bg: #061c2d;
  --info-border: #1aadd6;
  --info-text: #72d5ed;
  --info-icon: #3dc0e3;

  --status-online: #2ec87a;
  --status-offline: #6a8fa0;
  --status-warning: #e09830;
  --status-critical: #e05050;
  --status-idle: #72d5ed;

  --state-hover: #0c2233;
  --state-active: #133346;
  --state-focus-ring: #1aadd6;
  --state-skeleton: #133346;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */

.vk-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-primary);
}

.vk-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

.vk-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

.vk-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.vk-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.vk-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.vk-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.vk-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-tertiary);
}

.vk-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

/* Tabular numerics — telemetry */
.vk-numeric,
.vk-reading {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--fg-primary);
}

.vk-reading-xl {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

.vk-reading-lg {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.vk-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--fg-primary);
}