/* ============================================================
   OLT Monitoring — Design Tokens
   Modern, minimal, dashboard-grade.
   Drop this in BEFORE custom styles. Everything else reads from
   these CSS custom properties.
   ============================================================ */

/* ---------- Fonts (Google CDN) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ───────── Palette: neutrals (slate) ───────── */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ───────── Palette: navy (dark chrome) ───────── */
  --navy-50:  #F1F5F9;
  --navy-100: #E2E8F0;
  --navy-200: #CBD5E1;
  --navy-300: #94A3B8;
  --navy-400: #64748B;
  --navy-500: #475569;
  --navy-600: #334155;
  --navy-700: #1E293B;
  --navy-800: #0F1B2E;
  --navy-900: #0A1424;
  --navy-950: #050B17;

  /* ───────── Palette: primary (blue) ───────── */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;

  /* ───────── Palette: semantics ───────── */
  --green-50:  #F0FDF4;
  --green-100: #DCFCE7;
  --green-600: #16A34A;
  --green-700: #15803D;

  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-600: #D97706;
  --amber-700: #B45309;

  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-600: #DC2626;
  --red-700: #B91C1C;

  /* ───────── Semantic: surface ───────── */
  --bg-page:        var(--slate-50);
  --bg-surface:     #FFFFFF;
  --bg-surface-2:   var(--slate-50);   /* input fill, hover row */
  --bg-tint-blue:   var(--blue-50);
  --bg-tint-green:  var(--green-50);
  --bg-tint-amber:  var(--amber-50);
  --bg-tint-red:    var(--red-50);

  /* ───────── Semantic: dark chrome (sidebar / topbar dark mode) ───────── */
  --chrome-bg:         var(--navy-900);          /* #0A1424 sidebar bg */
  --chrome-bg-2:       var(--navy-800);          /* nested panels on dark */
  --chrome-border:     rgba(255,255,255,0.08);   /* dividers on dark */
  --chrome-fg-1:       #FFFFFF;                  /* primary text on dark */
  --chrome-fg-2:       rgba(255,255,255,0.65);   /* secondary text on dark */
  --chrome-fg-3:       rgba(255,255,255,0.40);   /* tertiary / icon */
  --chrome-hover:      rgba(255,255,255,0.06);
  --chrome-active-bg:  rgba(59,130,246,0.16);    /* blue tint */
  --chrome-active-fg:  #DBEAFE;                  /* light blue text */
  --chrome-active-bar: var(--blue-500);          /* left active bar */

  /* ───────── Semantic: ink (text) ───────── */
  --fg-1:           var(--slate-900);  /* primary text, headings */
  --fg-2:           var(--slate-600);  /* secondary text, labels */
  --fg-3:           var(--slate-400);  /* tertiary, placeholders */
  --fg-on-primary:  #FFFFFF;
  --fg-link:        var(--blue-600);
  --fg-link-hover:  var(--blue-700);

  /* ───────── Semantic: border ───────── */
  --border-1:       var(--slate-200);  /* default */
  --border-2:       var(--slate-300);  /* hover / stronger */
  --border-input:   var(--slate-200);
  --border-focus:   var(--blue-600);

  /* ───────── Semantic: action ───────── */
  --action-primary:        var(--blue-600);
  --action-primary-hover:  var(--blue-700);
  --action-success:        var(--green-600);
  --action-success-hover:  var(--green-700);
  --action-danger:         var(--red-600);
  --action-danger-hover:   var(--red-700);

  /* ───────── Status (chip) ───────── */
  --status-online-fg:   var(--green-700);
  --status-online-bg:   var(--green-50);
  --status-offline-fg:  var(--red-700);
  --status-offline-bg:  var(--red-50);
  --status-warn-fg:     var(--amber-700);
  --status-warn-bg:     var(--amber-50);
  --status-idle-fg:     var(--slate-600);
  --status-idle-bg:     var(--slate-100);

  /* ───────── Typography ───────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Type scale — dashboard density */
  --text-xs:   11px;   /* legends, micro-meta */
  --text-sm:   12px;   /* select content, chip text */
  --text-base: 13px;   /* table cells, body in dashboard */
  --text-md:   14px;   /* card body, paragraphs */
  --text-lg:   16px;   /* card titles */
  --text-xl:   18px;   /* page section titles */
  --text-2xl:  20px;   /* page H1 */
  --text-3xl:  24px;   /* hero / detail header */
  --text-4xl:  32px;   /* big numerics in stats */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-caps:   0.04em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ───────── Radii ───────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* ───────── Shadows ───────── */
  --shadow-none:    none;
  --shadow-sm:      0 1px 4px rgba(15, 23, 42, 0.05);   /* filter bar, popovers */
  --shadow-pop:     0 4px 16px rgba(15, 23, 42, 0.08);  /* menus, tooltips */

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

  /* ───────── Controls ───────── */
  --control-h-sm: 28px;
  --control-h:    36px;   /* filter, buttons */
  --control-h-lg: 38px;   /* primary action in detail */

  /* ───────── Layout ───────── */
  --sidebar-w:    240px;
  --topbar-h:     56px;
  --content-max:  1440px;
  --gutter:       24px;
}

/* ============================================================
   Base typography
   ============================================================ */
html { font-family: var(--font-sans); color: var(--fg-1); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01'; /* Inter tabular-friendly variants */
}

/* Numerics that line up in tables */
.tabular,
table td,
.olt-mono,
.mono { font-variant-numeric: tabular-nums; }

/* Headings */
h1, .h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
  margin: 0;
}
p {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  margin: 0;
}

/* Body roles */
.body-sm  { font-size: var(--text-sm);  color: var(--fg-1); }
.body-xs  { font-size: var(--text-xs);  color: var(--fg-2); }
.muted    { color: var(--fg-2); }
.subtle   { color: var(--fg-3); }

/* Caps label (table headers, eyebrows) */
.eyebrow,
th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Mono — serials, coords, IPs */
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* Links */
a {
  color: var(--fg-link);
  text-decoration: none;
}
a:hover { color: var(--fg-link-hover); }

/* Focus ring — accessibility */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}