/* ============================================================
   signalOPS — Foundations
   Colors, type, spacing, radii, shadows, motion.
   3 themes: [data-theme="light"], [data-theme="dark"] (default),
             [data-theme="cosmic"]
   ============================================================ */

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

/* ---------- Type families ---------- */
:root {
  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

  /* ---------- Spacing (4px base) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-5: 12px;
  --r-6: 16px;
  --r-7: 24px;
  --r-pill: 999px;

  /* ---------- Type scale ---------- */
  --t-xs:    11px;
  --t-sm:    13px;
  --t-base:  15px;
  --t-md:    17px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   32px;
  --t-3xl:   44px;
  --t-4xl:   60px;
  --t-5xl:   84px;
  --t-6xl:   120px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --tr-tight:  -0.04em;
  --tr-snug:   -0.02em;
  --tr-normal: 0;
  --tr-wide:   0.04em;
  --tr-mono:   0.06em;   /* for SMALL-CAPS / labels */

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-signal: cubic-bezier(0.16, 1, 0.3, 1);     /* snappy */
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   480ms;
  --dur-epic:   1200ms;
}

/* =====================================================
   DARK (default) — "system intelligence" base
   ===================================================== */
:root,
[data-theme="dark"] {
  --bg:           #0A0D12;
  --bg-elevated:  #11151C;
  --bg-overlay:   #161B24;
  --bg-sunken:    #07090D;

  --surface:      #11151C;
  --surface-hi:   #1A2030;
  --surface-lo:   #0E1218;

  --ink:          #F0F1F2;
  --ink-strong:   #FFFFFF;
  --ink-muted:    #8B95A3;
  --ink-dim:      #5C6470;
  --ink-disabled: #3A4150;

  --border:        #1F2530;
  --border-strong: #2A3240;
  --border-subtle: rgba(255,255,255,0.06);

  /* signal palette */
  --signal:        #3DF5A5;     /* primary accent / live data */
  --signal-soft:   rgba(61, 245, 165, 0.12);
  --signal-line:   rgba(61, 245, 165, 0.4);
  --signal-glow:   rgba(61, 245, 165, 0.5);
  --signal-deep:   #14B373;

  /* semantic */
  --info:    #5B8DEF;
  --warn:    #FFB547;
  --danger:  #FF5C73;
  --success: #3DF5A5;

  --info-soft:   rgba(91, 141, 239, 0.14);
  --warn-soft:   rgba(255, 181, 71, 0.14);
  --danger-soft: rgba(255, 92, 115, 0.14);

  /* secondary accent for cosmic continuity */
  --violet:      #9D7BFF;
  --violet-soft: rgba(157, 123, 255, 0.14);

  /* shadows + glows */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-3: 0 12px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05) inset;
  --shadow-glow: 0 0 0 1px var(--signal-line), 0 0 24px var(--signal-glow);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--signal);

  /* grid / infrastructure motifs */
  --grid-line: rgba(255,255,255,0.04);
  --grid-line-strong: rgba(255,255,255,0.08);
  --noise-opacity: 0.04;
}

/* =====================================================
   LIGHT — clean, premium, engineering-paper
   ===================================================== */
[data-theme="light"] {
  --bg:           #FAFAF7;
  --bg-elevated:  #FFFFFF;
  --bg-overlay:   #FFFFFF;
  --bg-sunken:    #F2F2EC;

  --surface:      #FFFFFF;
  --surface-hi:   #F8F8F4;
  --surface-lo:   #F2F2EC;

  --ink:          #0A0D12;
  --ink-strong:   #000000;
  --ink-muted:    #5C6470;
  --ink-dim:      #8B95A3;
  --ink-disabled: #C4CAD3;

  --border:        #E5E5E0;
  --border-strong: #C4CAD3;
  --border-subtle: rgba(0,0,0,0.06);

  --signal:        #00B36A;
  --signal-soft:   rgba(0, 179, 106, 0.10);
  --signal-line:   rgba(0, 179, 106, 0.4);
  --signal-glow:   rgba(0, 179, 106, 0.2);
  --signal-deep:   #008C53;

  --info:    #2A6FDB;
  --warn:    #B97800;
  --danger:  #D63A52;
  --success: #00B36A;

  --info-soft:   rgba(42, 111, 219, 0.10);
  --warn-soft:   rgba(185, 120, 0, 0.10);
  --danger-soft: rgba(214, 58, 82, 0.10);

  --violet:      #6E4BD9;
  --violet-soft: rgba(110, 75, 217, 0.10);

  --shadow-1: 0 1px 2px rgba(10,13,18,0.06);
  --shadow-2: 0 4px 12px rgba(10,13,18,0.08), 0 1px 2px rgba(10,13,18,0.04);
  --shadow-3: 0 16px 40px rgba(10,13,18,0.10), 0 2px 4px rgba(10,13,18,0.04);
  --shadow-glow: 0 0 0 1px var(--signal-line), 0 0 16px var(--signal-glow);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--signal);

  --grid-line: rgba(10,13,18,0.05);
  --grid-line-strong: rgba(10,13,18,0.10);
  --noise-opacity: 0.025;
}

/* =====================================================
   COSMIC — deep space, futuristic
   ===================================================== */
[data-theme="cosmic"] {
  --bg:           #0A0420;
  --bg-elevated:  rgba(30, 18, 60, 0.5);
  --bg-overlay:   rgba(40, 25, 80, 0.7);
  --bg-sunken:    #050118;

  --surface:      rgba(30, 18, 60, 0.5);
  --surface-hi:   rgba(50, 32, 96, 0.55);
  --surface-lo:   rgba(20, 12, 44, 0.5);

  --ink:          #F0EBFF;
  --ink-strong:   #FFFFFF;
  --ink-muted:    #B4A8D8;
  --ink-dim:      #7E6FAD;
  --ink-disabled: #4A3E72;

  --border:        rgba(157, 123, 255, 0.18);
  --border-strong: rgba(157, 123, 255, 0.35);
  --border-subtle: rgba(157, 123, 255, 0.10);

  --signal:        #3DF5A5;
  --signal-soft:   rgba(61, 245, 165, 0.12);
  --signal-line:   rgba(61, 245, 165, 0.4);
  --signal-glow:   rgba(61, 245, 165, 0.45);
  --signal-deep:   #14B373;

  --info:    #5B8DEF;
  --warn:    #FFB547;
  --danger:  #FF5C73;
  --success: #3DF5A5;

  --info-soft:   rgba(91, 141, 239, 0.18);
  --warn-soft:   rgba(255, 181, 71, 0.18);
  --danger-soft: rgba(255, 92, 115, 0.18);

  --violet:      #B49BFF;
  --violet-soft: rgba(180, 155, 255, 0.18);

  --shadow-1: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 4px 16px rgba(20, 5, 50, 0.6), 0 1px 0 rgba(255,255,255,0.06) inset;
  --shadow-3: 0 20px 48px rgba(20, 5, 50, 0.7), 0 1px 0 rgba(255,255,255,0.08) inset;
  --shadow-glow: 0 0 0 1px var(--signal-line), 0 0 32px var(--signal-glow);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--signal);

  --grid-line: rgba(180,155,255,0.06);
  --grid-line-strong: rgba(180,155,255,0.14);
  --noise-opacity: 0.05;
}

/* =====================================================
   Semantic typography classes (use directly)
   ===================================================== */
.t-display-hero {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, var(--t-6xl));
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.t-display {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, var(--t-5xl));
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}
.t-h4 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
}
.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: var(--lh-loose);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: var(--lh-normal);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: var(--lh-normal);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: var(--lh-normal);
  color: var(--ink-muted);
}
.t-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.t-code {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: var(--lh-normal);
}
.t-mono-sm {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-mono);
}

/* =====================================================
   Base reset — used by previews and UI kits
   ===================================================== */
.so-base {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
.so-base *,
.so-base *::before,
.so-base *::after { box-sizing: border-box; }

/* =====================================================
   Reusable infrastructure motifs (use as decoration)
   ===================================================== */

/* Grid overlay — for hero backgrounds */
.so-grid-bg {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}
.so-grid-bg--dense {
  background-size: 16px 16px;
}

/* Dot grid */
.so-dot-bg {
  background-image: radial-gradient(var(--grid-line-strong) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Vignette mask — fades content out at edges */
.so-vignette {
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* Signal pulse — for live data indicators */
@keyframes so-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--signal-glow); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
.so-pulse {
  background: var(--signal);
  border-radius: var(--r-pill);
  animation: so-pulse 2s var(--ease-out) infinite;
}

/* Theme transition — apply to root when switching */
.so-theme-transition,
.so-theme-transition * {
  transition:
    background-color var(--dur-slow) var(--ease-in-out),
    border-color var(--dur-slow) var(--ease-in-out),
    color var(--dur-slow) var(--ease-in-out),
    box-shadow var(--dur-slow) var(--ease-in-out) !important;
}