/* =====================================================================
   Innovate-Ops / IoT Octopus — design tokens
   Three selectable themes share one component layer. Only variables
   change per theme; components never hard-code colour.
   Reference palette (observed deck theme, 2026-11-01):
   navy #0C1828 · navy-2 #13284A · white #FFFFFF · canvas #F3F5F8
   blue #0048A8 · amber #F2A23A · light blue #6AA6FF · deep amber #A35F00
   slate #5E6B7E · light slate #A8B6C9
   ===================================================================== */

:root {
  /* ---- type ---- */
  --font-display: "Archivo", "Arial Black", Arial, Helvetica, sans-serif;
  --font-body: "IBM Plex Sans", Arial, Helvetica, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", "Courier New", monospace;
  --display-weight: 700;
  --display-tracking: -0.022em;

  /* type scale (fluid) */
  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-3xl: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  --t-4xl: clamp(2.3rem, 1.6rem + 3vw, 3.75rem);

  /* ---- spacing / shape ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 240ms;

  /* ---- base palette ---- */
  --navy: #0C1828;
  --navy-2: #13284A;
  --navy-3: #1C3560;
  --white: #FFFFFF;
  --canvas: #F3F5F8;
  --blue: #0048A8;
  --blue-light: #6AA6FF;
  --amber: #F2A23A;
  --amber-deep: #A35F00;
  --slate: #5E6B7E;
  --slate-light: #A8B6C9;
  --green: #1F8A4C;
  --green-led: #45E07C;
}

/* =====================================================================
   THEME A — Equipment Intelligence (primary recommendation)
   Navy hero/feature bands, white and light-canvas reading surfaces,
   primary blue, restrained amber for the one point that needs attention.
   ===================================================================== */
:root,
[data-theme="equipment-intelligence"] {
  --bg: var(--white);
  --bg-alt: var(--canvas);
  --surface: var(--white);
  --surface-2: #E9EEF5;
  --ink: #0F1B2D;
  --ink-2: #4A5A72;
  --ink-3: #74839A;
  --line: #D9E0EA;
  --line-strong: #B9C5D6;

  --accent: var(--blue);
  --accent-hover: #003B8A;
  --accent-ink: var(--white);
  --accent-soft: #E4ECF8;
  --accent-soft-ink: #003B8A;
  --link: var(--blue);

  --attention: var(--amber);
  --attention-ink: #5A3300;
  --attention-soft: #FDF0DC;

  --band-bg: var(--navy);
  --band-bg-2: var(--navy-2);
  --band-ink: var(--white);
  --band-muted: #B8C6DC;
  --band-line: rgba(255,255,255,.14);
  --band-surface: rgba(255,255,255,.06);
  --band-accent: var(--blue-light);

  --hero-bg: var(--navy);
  --hero-ink: var(--white);
  --hero-muted: #B8C6DC;
  --hero-grid: rgba(255,255,255,.05);

  --shadow: 0 10px 30px rgba(12,24,40,.08), 0 1px 2px rgba(12,24,40,.06);
  --shadow-lg: 0 24px 60px rgba(12,24,40,.16);
  --focus: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--blue);

  /* equipment artwork */
  --art-1: #2F5A9E;     /* primary machine body */
  --art-2: #1E3F73;     /* shaded faces */
  --art-3: #5B86C8;     /* highlights */
  --art-4: #D9E2F0;     /* light metal / plates */
  --art-line: #0F1B2D;
  --art-base: #9DB0CC;
  --art-sensor: var(--blue-light);
  --art-sensor-ring: rgba(106,166,255,.35);
  --art-trend: var(--blue-light);
  --art-attn: var(--amber);
  --hub-plinth: rgba(255,255,255,.08);
}

/* =====================================================================
   THEME B — Precision Engineering
   Bright technical surfaces, charcoal type, fine diagram lines,
   generous space, sharp corners, mono labels doing more of the work.
   ===================================================================== */
[data-theme="precision-engineering"] {
  --display-weight: 600;
  --display-tracking: -0.03em;
  --radius: 4px;
  --radius-sm: 3px;
  --radius-lg: 6px;

  --bg: #FFFFFF;
  --bg-alt: #F6F8FA;
  --surface: #FFFFFF;
  --surface-2: #EEF2F6;
  --ink: #1C2430;
  --ink-2: #4E5B6E;
  --ink-3: #7A8698;
  --line: #D7DEE8;
  --line-strong: #AEB9C9;

  --accent: #0048A8;
  --accent-hover: #003B8A;
  --accent-ink: #FFFFFF;
  --accent-soft: #EAF0FA;
  --accent-soft-ink: #003B8A;
  --link: #0048A8;

  --attention: #C97A12;
  --attention-ink: #5A3300;
  --attention-soft: #FBF1E2;

  --band-bg: #1C2430;
  --band-bg-2: #243040;
  --band-ink: #FFFFFF;
  --band-muted: #B5C0CF;
  --band-line: rgba(255,255,255,.12);
  --band-surface: rgba(255,255,255,.05);
  --band-accent: #8DB8FF;

  --hero-bg: #F6F8FA;
  --hero-ink: #1C2430;
  --hero-muted: #4E5B6E;
  --hero-grid: rgba(28,36,48,.07);

  --shadow: 0 1px 2px rgba(28,36,48,.06), 0 0 0 1px rgba(28,36,48,.05);
  --shadow-lg: 0 18px 40px rgba(28,36,48,.12);
  --focus: 0 0 0 3px #FFFFFF, 0 0 0 6px #0048A8;

  --art-1: #E9EEF4;
  --art-2: #C9D3E0;
  --art-3: #FFFFFF;
  --art-4: #F6F8FA;
  --art-line: #1C2430;
  --art-base: #B6C2D2;
  --art-sensor: #0048A8;
  --art-sensor-ring: rgba(0,72,168,.18);
  --art-trend: #0048A8;
  --art-attn: #C97A12;
  --hub-plinth: rgba(28,36,48,.06);
}

/* =====================================================================
   THEME C — Industrial Confidence
   Warm neutral surfaces, deep slate feature bands, selective amber,
   softer corners; real equipment imagery carries the character.
   ===================================================================== */
[data-theme="industrial-confidence"] {
  --display-weight: 800;
  --display-tracking: -0.02em;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --bg: #F7F3EC;
  --bg-alt: #EFE9DF;
  --surface: #FFFCF7;
  --surface-2: #EAE3D7;
  --ink: #1E2A3A;
  --ink-2: #55606F;
  --ink-3: #7E8794;
  --line: #DDD5C8;
  --line-strong: #C4BAA9;

  --accent: #2A4366;
  --accent-hover: #1E3350;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3E8EF;
  --accent-soft-ink: #1E3350;
  --link: #0048A8;

  --attention: #E0902A;
  --attention-ink: #5A3300;
  --attention-soft: #FBEBD3;

  --band-bg: #22303F;
  --band-bg-2: #2A3D57;
  --band-ink: #FFFCF7;
  --band-muted: #C3C9D2;
  --band-line: rgba(255,252,247,.14);
  --band-surface: rgba(255,252,247,.07);
  --band-accent: #F2A23A;

  --hero-bg: #22303F;
  --hero-ink: #FFFCF7;
  --hero-muted: #C3C9D2;
  --hero-grid: rgba(255,252,247,.05);

  --shadow: 0 10px 30px rgba(30,42,58,.08), 0 1px 2px rgba(30,42,58,.06);
  --shadow-lg: 0 24px 60px rgba(30,42,58,.18);
  --focus: 0 0 0 3px #FFFCF7, 0 0 0 6px #2A4366;

  --art-1: #3B5577;
  --art-2: #2A3D57;
  --art-3: #6B86AA;
  --art-4: #E9E2D6;
  --art-line: #1E2A3A;
  --art-base: #B8AB97;
  --art-sensor: #F2A23A;
  --art-sensor-ring: rgba(242,162,58,.3);
  --art-trend: #F2A23A;
  --art-attn: #F2A23A;
  --hub-plinth: rgba(255,252,247,.08);
}