/* =========================================================================
   WME Lab — Design Tokens
   Colors + Typography
   ========================================================================= */

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

/* Brand display face — Orbitron (variable, weight 400-900) */
@font-face {
  font-family: 'Orbitron';
  src: url('fonts/Orbitron-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Orbitron-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------------------- */
  /* COLOR — Neutrals                                                      */
  /* Dark instrumentation surface. Background is near-black, not pure.     */
  /* --------------------------------------------------------------------- */
  --bg-0: #06080B;          /* page deep — beneath everything */
  --bg-1: #0A0C10;          /* page background — default */
  --bg-2: #0F1218;          /* card / surface */
  --bg-3: #151922;          /* raised surface / hover */
  --bg-4: #1C2230;          /* elevated / pressed */

  /* Foreground — text steps */
  --fg-0: #FFFFFF;          /* pure white — display, KPIs */
  --fg-1: #E6E9EF;          /* primary body text */
  --fg-2: #A0A6B2;          /* secondary text, captions */
  --fg-3: #6B7280;          /* tertiary, meta, disabled labels */
  --fg-4: #3F4654;          /* placeholder, hairline labels */

  /* Hairline borders (translucent to layer over any surface) */
  --border-1: rgba(255, 255, 255, 0.08);   /* default border */
  --border-2: rgba(255, 255, 255, 0.16);   /* hover / emphasized */
  --border-3: rgba(255, 255, 255, 0.32);   /* strong / focused */

  /* --------------------------------------------------------------------- */
  /* COLOR — Accents                                                       */
  /* Blue = action. Green = signal/state. Use sparingly.                   */
  /* --------------------------------------------------------------------- */
  --blue-50:  #EAF2FF;
  --blue-100: #C7DCFF;
  --blue-300: #6FA4FF;
  --blue-500: #3B82F6;       /* PRIMARY ACCENT — actions, links, focus */
  --blue-600: #2563EB;       /* pressed */
  --blue-700: #1D4ED8;
  --blue-glow: rgba(59, 130, 246, 0.24);

  --green-50:  #E5FBEF;
  --green-100: #B9F3D4;
  --green-300: #5BE5A5;
  --green-500: #10D982;       /* SECONDARY ACCENT — live, success, deltas */
  --green-600: #0BB36A;
  --green-700: #079454;
  --green-glow: rgba(16, 217, 130, 0.24);

  /* --------------------------------------------------------------------- */
  /* COLOR — Semantic                                                      */
  /* --------------------------------------------------------------------- */
  --color-action: var(--blue-500);
  --color-action-hover: #5B9BFF;
  --color-action-active: var(--blue-600);

  --color-signal: var(--green-500);          /* live, online, positive */
  --color-warning: #F5A524;                  /* used minimally */
  --color-danger:  #F43F5E;                  /* destructive only */

  --color-link: var(--blue-500);
  --color-link-hover: #5B9BFF;

  --color-focus-ring: var(--blue-500);

  /* --------------------------------------------------------------------- */
  /* RADII                                                                 */
  /* --------------------------------------------------------------------- */
  --radius-sm: 6px;        /* inputs, small chips */
  --radius-md: 8px;        /* buttons */
  --radius-lg: 12px;       /* cards */
  --radius-xl: 16px;       /* modals, large surfaces */
  --radius-full: 9999px;   /* status pills, avatars only */

  /* --------------------------------------------------------------------- */
  /* SPACING (4px base)                                                    */
  /* --------------------------------------------------------------------- */
  --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: 96px;
  --space-10: 128px;

  /* --------------------------------------------------------------------- */
  /* SHADOWS — used sparingly                                              */
  /* --------------------------------------------------------------------- */
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6);
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --focus-ring: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--blue-500);
  --glow-live: 0 0 24px var(--green-glow);

  /* --------------------------------------------------------------------- */
  /* TYPOGRAPHY — Families                                                 */
  /* --------------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;
  --font-display: 'Space Grotesk', var(--font-sans);

  /* --------------------------------------------------------------------- */
  /* TYPOGRAPHY — Scale                                                    */
  /* --------------------------------------------------------------------- */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  44px;
  --text-5xl:  60px;
  --text-6xl:  84px;

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Tracking */
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.08em;

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

  /* --------------------------------------------------------------------- */
  /* MOTION                                                                */
  /* --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 240ms;

  /* --------------------------------------------------------------------- */
  /* LAYOUT                                                                */
  /* --------------------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 880px;
  --container-prose: 640px;
}

/* ========================================================================= */
/* BASE STYLES                                                               */
/* ========================================================================= */

html {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';  /* Inter alts: I, l, a */
}

body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-1);
}

/* ========================================================================= */
/* SEMANTIC TYPE                                                              */
/* ========================================================================= */

.h-display, .display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: 0;
  color: var(--fg-0);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  color: var(--fg-0);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: 0.005em;
  color: var(--fg-0);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-0);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-0);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-0);
  margin: 0;
}

p, .p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
  margin: 0;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.small, small {
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.caption {
  font-size: var(--text-xs);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.kpi {
  font-family: var(--font-mono);
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}

code, .code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-1);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-1);
  overflow-x: auto;
}

pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

::selection {
  background: var(--blue-500);
  color: var(--fg-0);
}

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

/* Scrollbar — minimal */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg-4);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-1);
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-4); }