/* ============================================================
   CHEETAH DESIGN SYSTEM — Colors & Type
   Industrial synthwave. Dark-first. Kiosk-scale.
   Mirrors cheetah-ui/src/app.css and lib/styles/theme.css
   ============================================================ */

/* Google Fonts — substitutes flagged in README.
   Originals (if user has them): Barlow / Barlow Condensed / JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ——— CHEETAH TEAL — Primary brand */
  --teal-50:  #eafaff;
  --teal-100: #d7f2fc;
  --teal-200: #b4e6f7;
  --teal-300: #88d1e9;
  --teal-400: #59b7d5;
  --teal-500: #3da0bd;
  --teal-600: #318ea9;
  --teal-700: #1989a6;   /* primary */
  --teal-800: #266578;
  --teal-900: #1c4a58;
  --teal-950: #0b2831;

  /* ——— CHEETAH PINK — Highlight / danger-lite / brand pop */
  --pink-50:  #fff3f4;
  --pink-100: #ffe5e8;
  --pink-200: #ffcdd3;
  --pink-300: #fea6b2;
  --pink-400: #f37289;
  --pink-500: #e14369;
  --pink-600: #d72e5d;   /* highlight */
  --pink-700: #a81b45;
  --pink-800: #881938;
  --pink-900: #69172c;
  --pink-950: #380814;

  /* ——— NEUTRAL — Gray ramp (Tailwind gray) */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;

  /* ——— SEMANTIC — Status */
  --ok-bg:      color-mix(in oklab, var(--teal-950) 50%, transparent);
  --ok-fg:      var(--teal-300);
  --ok-border:  var(--teal-800);
  --ok-dot:     var(--teal-400);

  --warn-bg:     rgb(66 32 6 / 0.5);   /* yellow-950/50 */
  --warn-fg:     #fde047;               /* yellow-300 */
  --warn-border: #854d0e;               /* yellow-800 */
  --warn-dot:    #facc15;               /* yellow-400 */

  --err-bg:     color-mix(in oklab, var(--pink-950) 60%, transparent);
  --err-fg:     var(--pink-300);
  --err-border: var(--pink-800);
  --err-dot:    var(--pink-500);

  --info-bg:     rgb(23 37 84 / 0.5);
  --info-fg:     #93c5fd;
  --info-border: #1e40af;
  --info-dot:    #60a5fa;

  /* ——— SURFACES — Dark-first */
  --bg:          var(--gray-950);
  --surface-1:   var(--gray-900);   /* panels */
  --surface-2:   var(--gray-800);   /* inputs, hover */
  --surface-3:   #374151;
  --border:      var(--gray-800);
  --border-hi:   var(--gray-700);
  --fg-1:        var(--gray-100);   /* primary text */
  --fg-2:        var(--gray-300);   /* secondary */
  --fg-3:        var(--gray-400);   /* tertiary / captions */
  --fg-muted:    var(--gray-500);   /* labels, timestamps */
  --fg-dim:      var(--gray-600);   /* disabled, divider text */

  /* ——— BRAND SEMANTICS */
  --brand:         var(--teal-700);
  --brand-hover:   var(--teal-600);
  --brand-text:    var(--teal-400);   /* on-dark headlines */
  --brand-ring:    var(--teal-500);
  --accent:        var(--pink-600);   /* laser pink */
  --accent-text:   var(--pink-400);

  /* ——— TYPE — Family stacks */
  --font-display: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ——— TYPE — Scale (kiosk-calibrated, baseline 16px. Multiply by 1.5× at root for kiosk.) */
  --fs-micro:   11px;   /* pills, tiny meta */
  --fs-xs:      12px;   /* captions */
  --fs-sm:      14px;   /* secondary body */
  --fs-base:    16px;   /* body */
  --fs-lg:      18px;
  --fs-xl:      20px;
  --fs-2xl:     24px;   /* h3 */
  --fs-3xl:     30px;   /* h2 */
  --fs-4xl:     36px;   /* h1 */
  --fs-5xl:     48px;   /* hero */
  --fs-6xl:     64px;   /* display */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.75;

  --tracking-wider: 0.05em;   /* uppercase labels */
  --tracking-wide:  0.025em;
  --tracking-none:  0;
  --tracking-tight: -0.015em;

  /* ——— SPACING / RADIUS / SHADOW */
  --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;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 9999px;

  --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.5);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.8);

  /* Brand glows — synthwave laser */
  --glow-teal:  0 0 20px rgb(0 225 234 / 0.35), 0 0 40px rgb(0 225 234 / 0.15);
  --glow-pink:  0 0 20px rgb(215 46 93 / 0.45), 0 0 40px rgb(215 46 93 / 0.18);

  /* ——— TOUCH / KIOSK — minimum hit targets for gloves */
  --hit-min:    44px;
  --hit-comfy:  56px;
  --hit-xl:     72px;

  /* ——— MOTION */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;
}

/* ============================================================
   KIOSK SCALE — matches cheetah-ui app.css
   The production operator frontend scales 1rem = 24px.
   ============================================================ */
html[data-scale="kiosk"] { font-size: 24px; }
html[data-scale="desktop"] { font-size: 16px; }

/* ============================================================
   BASE
   ============================================================ */
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Use class OR element — both work.
   ============================================================ */

/* DISPLAY — hero-scale Cheetah logo-ish, condensed + uppercase */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-text);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--fg-1);
  margin: 0;
}

p, .p {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0;
}

small, .caption {
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

/* LABEL — the industrial hallmark. Uppercase, spaced, muted. */
.label, .eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-muted);
}

/* LABEL-BRAND — teal version for active/selected headers */
.label-brand {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--brand-text);
}

/* MONO — measurements, TCP positions, error codes, timestamps */
code, .mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95em;
}

/* IN-YOUR-FACE — full-bleed warning / E-STOP / passed banners */
.shout {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}