/* =============================================================================
   syfTec Design System — colors & type
   Vibe: technical & precise; control-room dark UI with chrome accents
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Barlow+Condensed:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Brand color: chrome silver + signal blue ----------
     The mark is a chrome lens iris with a deep cyan-blue dot at center.
     We translate that into: deep slate backgrounds (the chrome shadow tones),
     a single saturated signal-blue accent, and a clean neutral ramp. */

  --brand-blue:        #1B9DDB;   /* primary signal blue, sampled from logo dot */
  --brand-blue-bright: #29BFFF;   /* hover / focus glow */
  --brand-blue-deep:   #0E5C82;   /* pressed, subdued accents */
  --brand-blue-soft:   #DDF1FB;   /* tint for light surfaces */

  --brand-chrome-100:  #F4F6F8;   /* highlight on chrome */
  --brand-chrome-300:  #C4CCD3;
  --brand-chrome-500:  #8A95A0;   /* mid chrome */
  --brand-chrome-700:  #4A535C;
  --brand-chrome-900:  #1F262D;   /* deep chrome shadow */

  /* ---------- Neutral ramp (slate) ---------- */
  --slate-50:  #F6F8FA;
  --slate-100: #EDF1F5;
  --slate-200: #D6DCE3;
  --slate-300: #B0B8C2;
  --slate-400: #7B8590;
  --slate-500: #545E69;
  --slate-600: #3B444E;
  --slate-700: #262D35;
  --slate-800: #181D23;
  --slate-900: #0E1217;
  --slate-950: #07090C;

  /* ---------- Semantic colors ---------- */
  --signal-on-air:  #E63946;   /* red — recording / on-air */
  --signal-cue:     #F4A742;   /* amber — cue / warning */
  --signal-ready:   #2BD17E;   /* green — ready / live OK */
  --signal-info:    var(--brand-blue);

  /* ---------- Surfaces (dark control-room default) ---------- */
  --bg-page:        var(--slate-950);
  --bg-surface:     var(--slate-900);
  --bg-surface-2:   var(--slate-800);
  --bg-surface-3:   var(--slate-700);
  --bg-elevated:    #11161C;

  --fg-primary:     #EDF1F5;
  --fg-secondary:   #B0B8C2;
  --fg-tertiary:    #7B8590;
  --fg-muted:       #545E69;
  --fg-on-accent:   #07090C;

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);

  /* ---------- Typography ---------- */
  --font-sans:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Barlow", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---------- Type scale ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii — sharp, technical ---------- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   3px;
  --r-md:   4px;
  --r-lg:   6px;
  --r-xl:   10px;
  --r-pill: 999px;

  /* ---------- Shadows / elevation ----------
     Dark UI uses inner highlights + outer black drops, NOT soft blurs */
  --shadow-1: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 0 rgba(255,255,255,0.05) inset, 0 4px 12px rgba(0,0,0,0.5);
  --shadow-3: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 12px 32px rgba(0,0,0,0.6);
  --shadow-glow-blue: 0 0 0 1px rgba(27,157,219,0.5), 0 0 24px -4px rgba(27,157,219,0.6);
  --shadow-on-air:    0 0 0 1px rgba(230,57,70,0.5), 0 0 18px -2px rgba(230,57,70,0.7);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:   cubic-bezier(0.5, 0, 0.75, 0);
  --ease-snap: cubic-bezier(0.4, 0, 0, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: var(--sp-8);
}

/* =============================================================================
   Semantic type styles
   ============================================================================= */

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--brand-blue);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.3;
  color: var(--fg-primary);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--fg-secondary);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-secondary);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wide);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-secondary);
  letter-spacing: 0;
}

.t-mono-caps {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-tertiary);
}

/* =============================================================================
   Base reset / page defaults
   ============================================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--brand-blue); color: var(--fg-on-accent); }