/* ============================================================
   MonitorCenter Design System — Colors & Typography
   Base: Radix Slate Dark + Brand Accents
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@1,300;1,400;1,500;1,600&family=Syne:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================================================
   COLOR TOKENS — Radix Slate Dark
   ============================================================ */
:root {
  /* Base surfaces */
  --slate-1:  #0d0f11;   /* Main canvas background */
  --slate-2:  #111416;   /* Cards, sidebars, navbars */
  --slate-3:  #181c20;   /* Hover bg, inputs, active tabs */
  --slate-4:  #1e2329;   /* Secondary bg, selected items */
  --slate-5:  #232a32;   /* Low-contrast bg */
  --slate-6:  #2d3740;   /* Standard borders */
  --slate-7:  #38434e;   /* Hover borders, strong separators */
  --slate-9:  #556170;   /* Muted text / placeholders */
  --slate-11: #97a3ae;   /* Secondary text */
  --slate-12: #eceef0;   /* Primary text / white */

  /* Brand accents */
  --accent:   #5685cb;   /* MonitorCenter blue — CTA, links, type accent */
  --green:    #79b75f;   /* Online / success / active */
  --red:      #e5484d;   /* Alert / error / REC */
  --orange:   #f97316;   /* Events / motion / warning */

  /* Accent with opacity (common uses) */
  --accent-bg:     rgba(86, 133, 203, 0.08);
  --accent-border: rgba(86, 133, 203, 0.25);
  --green-glow:    rgba(121, 183, 95, 0.80);
  --red-glow:      rgba(229, 72, 77, 0.80);
  --orange-glow:   rgba(249, 115, 22, 0.80);

  /* ============================================================
     SEMANTIC COLOR ALIASES
     ============================================================ */
  --bg-canvas:     var(--slate-1);
  --bg-card:       var(--slate-2);
  --bg-hover:      var(--slate-3);
  --bg-selected:   var(--slate-4);
  --border:        var(--slate-6);
  --border-hover:  var(--slate-7);
  --text-primary:  var(--slate-12);
  --text-secondary:var(--slate-11);
  --text-muted:    var(--slate-9);
  --link:          var(--accent);

  /* ============================================================
     TYPOGRAPHY — Font Families
     ============================================================ */
  --font-display:   'Barlow Condensed', sans-serif;
  --font-editorial: 'Cormorant Garamond', serif;
  --font-body:      'Inter', sans-serif;
  --font-alt-body:  'Syne', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* ============================================================
     TYPOGRAPHY — Type Scale (base: 1080px canvas)
     ============================================================ */
  --text-hero:      clamp(72px, 10vw, 196px);  /* Hero H1 */
  --text-h1:        clamp(48px, 6vw, 108px);   /* H1 / Display */
  --text-h2:        clamp(36px, 4.5vw, 72px);  /* H2 / Answer */
  --text-h3:        clamp(24px, 3vw, 48px);    /* H3 */
  --text-eyebrow:   clamp(11px, 1vw, 14px);    /* Label / eyebrow */
  --text-body-lg:   clamp(18px, 2vw, 28px);    /* Body large */
  --text-body:      clamp(14px, 1.5vw, 20px);  /* Body */
  --text-small:     clamp(12px, 1vw, 16px);    /* Small */
  --text-micro:     clamp(10px, 0.8vw, 13px);  /* Micro / metadata */

  /* ============================================================
     TYPOGRAPHY — Weights
     ============================================================ */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  /* ============================================================
     TYPOGRAPHY — Line Heights
     ============================================================ */
  --lh-display:  0.88;   /* 0.82–0.92 for large headlines */
  --lh-heading:  1.10;
  --lh-body:     1.60;   /* 1.55–1.70 for paragraphs */
  --lh-tight:    1.30;

  /* ============================================================
     TYPOGRAPHY — Letter Spacing
     ============================================================ */
  --ls-display:  -0.025em;
  --ls-eyebrow:  0.22em;
  --ls-mono:     0.02em;
  --ls-micro:    0.10em;

  /* ============================================================
     SPACING TOKENS
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   80px;
  --space-10: 120px;

  /* Canvas padding (1080px base) */
  --pad-canvas-x:  68px;
  --pad-canvas-y:  56px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 100px;

  /* ============================================================
     SHADOW / ELEVATION
     ============================================================ */
  --shadow-low:    none;   /* Pills — border only */
  --shadow-card:   0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-high:   0 32px 80px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-glow-accent: 0 0 8px rgba(86, 133, 203, 0.70);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-black);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
  color: var(--text-primary);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-light);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 75ch;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  letter-spacing: var(--ls-mono);
  color: var(--text-primary);
}

a {
  color: var(--link);
  text-decoration: none;
}

/* ============================================================
   COMPONENT BASE CLASSES
   ============================================================ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.card-accent {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.badge-accent {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-primary:hover {
  background: #4a78bf;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-outline:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.separator {
  height: 1px;
  background: var(--border);
}

.separator-fade {
  height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}

.nav-item-active {
  background: rgba(86, 133, 203, 0.12);
  border: 1px solid rgba(86, 133, 203, 0.20);
  color: var(--accent);
  border-radius: var(--radius-md);
}

.dot-online {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
}

.dot-rec {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red-glow);
}

.dot-alert {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange-glow);
}