/* Spotlite Design System — core tokens
 * Import this first. Every other stylesheet reads from these variables.
 */

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter_24pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Inter 400/600/700 synthesize from the 500 master we received. */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* JetBrains Mono 500/600 synthesize from the 400 master. */

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --bg-page:        #232A32;
  --bg-sidenav:     #14181D;
  --bg-card:        #363C48;
  --bg-elev-2:      #3C424E;
  --bg-input:       #2A3039;

  --border-subtle:  #3C424E;
  --border-default: #5A616E;
  --border-strong:  #7A8292;

  /* ── Brand ────────────────────────────────────────────────── */
  --brand-500:      #F2612C;
  --brand-400:      #FF7A44;
  --brand-300:      #FF9568;
  --brand-100:      #FFD4C1;
  --brand-bg:       rgba(242, 97, 44, 0.12);
  --brand-border:   rgba(242, 97, 44, 0.55);

  /* ── Text ─────────────────────────────────────────────────── */
  --text-primary:   #FFFFFF;
  --text-secondary: #B8BEC7;
  --text-tertiary:  #6B7380;
  --text-muted:     #8790A0;
  --text-on-brand:  #FFFFFF;

  /* ── Status ───────────────────────────────────────────────── */
  --status-alarm:      #F26161;
  --status-alert:      #F2D661;
  --status-stable:     #5ED6A3;
  --status-undefined:  #B8BEC7;
  --status-top:        #E05A5A;
  --status-published:  #3CB371;

  --status-alarm-bg:   rgba(242, 97, 97, 0.18);
  --status-alert-bg:   rgba(242, 214, 97, 0.18);
  --status-stable-bg:  rgba(94, 214, 163, 0.18);
  --status-top-bg:     rgba(224, 90, 90, 0.20);
  --status-pub-bg:     rgba(60, 179, 113, 0.20);

  /* ── Charts ───────────────────────────────────────────────── */
  --chart-orange:   #F2612C;
  --chart-blue:     #4AA3FF;
  --chart-green:    #5ED6A3;
  --chart-yellow:   #F2D661;
  --chart-red:      #F26161;
  --chart-grid:     rgba(184, 190, 199, 0.08);
  --chart-axis:     #6B7380;

  /* ── Type ─────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --t-display:    600 32px/40px var(--font-sans);
  --t-h1:         600 24px/32px var(--font-sans);
  --t-h2:         600 18px/24px var(--font-sans);
  --t-h3:         600 15px/20px var(--font-sans);
  --t-body:       400 14px/20px var(--font-sans);
  --t-body-strong:500 14px/20px var(--font-sans);
  --t-label:      500 13px/16px var(--font-sans);
  --t-caption:    400 12px/16px var(--font-sans);
  --t-caption-up: 500 11px/14px var(--font-sans);

  --t-metric-xl:  500 28px/32px var(--font-mono);
  --t-metric:     500 20px/24px var(--font-mono);
  --t-data:       400 14px/20px var(--font-mono);
  --t-data-sm:    400 12px/16px var(--font-mono);
  --t-data-xs:    400 11px/14px var(--font-mono);

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

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

  /* ── Elevation ────────────────────────────────────────────── */
  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-modal: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-pop:   0 6px 20px rgba(0, 0, 0, 0.40);

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-w:     240px;
  --sidebar-w-col: 64px;
  --subrail-w:     48px;
}

/* Base resets used across previews */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}