/*
 * Quintinity Design System — Colors & Typography
 * Version: 0.2.0 · Updated: 2026-05-23
 * Source of truth: Quintinity-Brand-Guidelines.md v0.1.0 (2026-04-22)
 *
 * Two typefaces. No third. Ever.
 * Host Grotesk (weight 500 primary) + JetBrains Mono (ALL CAPS, 0.22em tracking)
 */

@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────
   SURFACE TOKENS
   ───────────────────────────────────────── */
:root {
  /* Core surfaces — never use #000 or #FFF */
  --surface-canvas:  #0E0E10;   /* primary dark bg — kiosk, wall display, marketing hero */
  --surface-paper:   #F2F1EC;   /* primary light bg — TDM dashboard, Gauge Web, print */
  --surface-raised:  #17171A;   /* card/panel on canvas — +4% lift, no shadow */
  --surface-sunk:    #E8E7E1;   /* card/panel on paper — −3% from paper */

  /* Legacy aliases — kept for compatibility */
  --color-graphite:     #0E0E10;
  --color-graphite-90:  #17171A;
  --color-graphite-80:  #252527;
  --color-graphite-70:  rgba(242, 241, 236, 0.10);  /* hairline on canvas */
  --color-off-white:    #F2F1EC;
}

/* ─────────────────────────────────────────
   TEXT TOKENS
   ───────────────────────────────────────── */
:root {
  /* WCAG-measured pairings — see brand guide §3 */
  --text-primary:   #F2F1EC;    /* on canvas (16.3:1 AAA) */
  --text-primary-paper: #0E0E10; /* on paper (17.8:1 AAA) */
  --text-secondary: #86868F;    /* captions, metadata, table col headers */
                                /* 4.5:1 on canvas (AA body) · 3.6:1 on paper (AA large only) */
  --text-muted-canvas: #A8A8B0; /* disabled/tertiary on canvas */
  --text-muted-paper:  #58585E; /* disabled/tertiary on paper */
  --text-accent:    #D4491B;    /* signal text — status labels, active phase markers */
                                /* 4.9:1 on paper (AA) · 4.3:1 on canvas (AA large only) */
  --text-accent-dark: #E25A2C;  /* amber uplift for body-size text on canvas (5.1:1 AA) */
}

/* ─────────────────────────────────────────
   ACCENT TOKENS
   ───────────────────────────────────────── */
:root {
  --accent-signal:      #D4491B;   /* burnt amber — the only accent */
  --accent-signal-dark: #E25A2C;   /* body-size amber on graphite (5.1:1) */
  --accent-hover:       #BC3F16;   /* amber on hover */
  --accent-muted:       #7A2A0F;   /* amber at low prominence */
  --accent-10:          rgba(212, 73, 27, 0.10);
}

/* ─────────────────────────────────────────
   STATUS TOKENS
   Harmonised with amber — NOT default SaaS colors
   ───────────────────────────────────────── */
:root {
  --status-running:  #C8B560;   /* active/good — oxidised brass, not leaf-green */
                                /* 4.6:1 on canvas (AA) · 3.4:1 on paper (large only) */
  --status-idle:     #86868F;   /* idle — ink-muted (= text.secondary) */
  --status-warning:  #D4491B;   /* warning = accent.signal — amber IS the warning color */
  --status-danger:   #8C2A1C;   /* fault/stopped — oxblood, not fire-engine red */
                                /* 7.4:1 on paper · 3.2:1 on canvas (large only) */
  --status-danger-dark: #B43A26; /* fault body text on canvas (4.8:1 AA) */
  --status-offline:  #3A3A40;   /* disconnected — near-canvas, "no signal" */
}

/* ─────────────────────────────────────────
   BORDER TOKENS
   rgba, never solid hex — adapts to surface
   ───────────────────────────────────────── */
:root {
  /* On canvas (graphite) */
  --border-hairline-canvas: rgba(242, 241, 236, 0.10);
  --border-strong-canvas:   rgba(242, 241, 236, 0.24);
  /* On paper (off-white) */
  --border-hairline-paper:  rgba(14, 14, 16, 0.08);
  --border-strong-paper:    rgba(14, 14, 16, 0.24);
  /* Accent — always solid */
  --border-accent:          #D4491B;

  /* Semantic defaults (dark-first) */
  --border-hairline: var(--border-hairline-canvas);
  --border-strong:   var(--border-strong-canvas);
}

/* ─────────────────────────────────────────
   TYPOGRAPHY FOUNDATIONS
   ───────────────────────────────────────── */
:root {
  --font-sans:  'Host Grotesk', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  --fw-body:    400;   /* long-form body on marketing only */
  --fw-ui:      500;   /* primary weight — headlines, UI, default */
  --fw-numeric: 600;   /* KPIs, dashboard numbers */
  /* Never 700+ — reads aggressive */

  /* Type scale — 4-unit rhythm, 1.25 ratio (per brand guide §4) */
  --type-display:  56px;  /* line-height: 60px — marketing hero, up to 220pt print/booth */
  --type-h1:       40px;  /* line-height: 48px — page titles */
  --type-h2:       28px;  /* line-height: 36px — section headers */
  --type-h3:       20px;  /* line-height: 28px — card titles, table group headers */
  --type-body:     15px;  /* line-height: 24px — default UI and body */
  --type-body-sm:  13px;  /* line-height: 20px — table cells, secondary body */
  --type-caption:  12px;  /* line-height: 16px — help text, footnotes */
  --type-mono-sm:  11px;  /* line-height: 16px — JetBrains Mono labels */
  --type-kpi:      48px;  /* line-height: 52px — dashboard numeric headline */

  /* Clamp variants for responsive marketing surfaces */
  --type-display-fluid: clamp(40px, 6vw, 56px);
  --type-h1-fluid:      clamp(28px, 4vw, 40px);
  --type-h2-fluid:      clamp(22px, 3vw, 28px);

  /* Mono tracking — fixed per spec */
  --tracking-mono: 0.22em;

  /* Headline tracking */
  --tracking-display: -0.02em;
  --tracking-h1:      -0.02em;
  --tracking-h2:      -0.01em;
}

/* ─────────────────────────────────────────
   SEMANTIC TYPOGRAPHY CLASSES
   Sentence case everywhere.
   Never full-uppercase Host Grotesk.
   JetBrains Mono labels: ALL CAPS + 0.22em.
   ───────────────────────────────────────── */

.t-display {
  font-family: var(--font-sans);
  font-size: var(--type-display);
  font-weight: var(--fw-ui);
  line-height: 60px;
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--type-h1);
  font-weight: var(--fw-ui);
  line-height: 48px;
  letter-spacing: var(--tracking-h1);
  color: var(--text-primary);
}

.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--type-h2);
  font-weight: var(--fw-ui);
  line-height: 36px;
  letter-spacing: var(--tracking-h2);
  color: var(--text-primary);
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--type-h3);
  font-weight: var(--fw-ui);
  line-height: 28px;
  color: var(--text-primary);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--fw-ui);
  line-height: 24px;
  color: var(--text-primary);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm);
  font-weight: var(--fw-ui);
  line-height: 20px;
  color: var(--text-secondary);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: var(--fw-ui);
  line-height: 16px;
  color: var(--text-secondary);
}

.t-kpi {
  font-family: var(--font-sans);
  font-size: var(--type-kpi);
  font-weight: var(--fw-numeric);
  line-height: 52px;
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}

/* JetBrains Mono — the only ALL CAPS usage */
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  font-weight: 500;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
}

.t-mono-accent {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  font-weight: 500;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--accent-signal);
}

/* ─────────────────────────────────────────
   SPACING TOKENS
   Base unit 4px — all multiples
   ───────────────────────────────────────── */
:root {
  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;   /* default card padding desktop */
  --space-5:   24px;   /* default card padding kiosk */
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;
}

/* ─────────────────────────────────────────
   RADII
   Industrial, tight. Maximum 4px. Never pills.
   ───────────────────────────────────────── */
:root {
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;  /* maximum */
  /* No larger radii. No pills. This is an industrial brand. */
}

/* ─────────────────────────────────────────
   MOTION TOKENS
   Under 400ms. One easing curve.
   No bouncy springs. No parallax.
   ───────────────────────────────────────── */
:root {
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* the only curve */
  --dur-fast:  120ms;   /* page fades, hover */
  --dur-base:  200ms;   /* status changes, crossfades */
  --dur-slow:  400ms;   /* nothing longer in UI */
  /* Live/training sweep: 2px amber bar L→R at 2s linear infinite */
}

@keyframes amber-sweep {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* Live/training state — the only permitted loop animation */
.live-rule {
  height: 2px;
  background: var(--accent-signal);
  animation: amber-sweep 2s linear infinite;
}

/* Unknown-progress loading state (1.5s sweep) */
.loading-rule {
  height: 2px;
  background: var(--accent-signal);
  animation: amber-sweep 1.5s linear infinite;
}

/* ─────────────────────────────────────────
   STATUS INDICATOR
   8×8 SQUARE dot — never a circle
   "We're not a consumer app"
   ───────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 0;   /* square — not circle */
  flex-shrink: 0;
}
.status-dot.running  { background: var(--status-running); }
.status-dot.idle     { background: var(--status-idle); }
.status-dot.warning  { background: var(--status-warning); }
.status-dot.danger   { background: var(--status-danger); }
.status-dot.offline  { background: var(--status-offline); }

/* ─────────────────────────────────────────
   COMPONENT TOKENS — BUTTONS
   ───────────────────────────────────────── */
:root {
  /* Primary: canvas fill, off-white label */
  --btn-primary-bg:       var(--accent-signal);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-fg:       var(--surface-paper);
  /* Secondary: transparent, strong border */
  --btn-secondary-bg:       transparent;
  --btn-secondary-border:   var(--border-strong-canvas);
  --btn-secondary-fg:       var(--text-primary);
  /* Focus: 2px accent outline, 2px offset */
  --btn-focus-outline: 2px solid var(--accent-signal);
}

/* ─────────────────────────────────────────
   COMPONENT TOKENS — CARDS
   ───────────────────────────────────────── */
:root {
  --card-bg-canvas:  var(--surface-raised);  /* #17171A on graphite */
  --card-bg-paper:   var(--surface-sunk);    /* #E8E7E1 on paper */
  --card-border:     var(--border-hairline); /* rgba, never solid */
  --card-radius:     var(--radius-2);        /* 4px */
  --card-padding:    var(--space-5);         /* 24px */
  /* No drop shadows — ever */
}

/* ─────────────────────────────────────────
   BASE RESET
   ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  font-weight: var(--fw-ui);
  font-size: var(--type-body);
  background: var(--surface-canvas);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a:hover { opacity: 0.7; }