/* ═══════════════════════════════════════════════════════════════
   @ttt/ui — Design Tokens
   Source of truth: every var() in the system resolves here.
   ═══════════════════════════════════════════════════════════════ */

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

:root,
[data-theme="dark"] {
  /* surfaces */
  --bg-base:     #0a0d12;
  --bg-panel:    #0f1318;
  --bg-raised:   #151a21;
  --bg-well:     #080a0e;
  --bg-input:    #12171e;

  /* accent (teal) */
  --teal:        #14b8a6;
  --teal-hover:  #0d9488;
  --teal-soft:   rgba(20,184,166,0.08);
  --teal-border: rgba(20,184,166,0.22);
  --teal-glow:   0 0 24px rgba(20,184,166,0.10);

  /* layer */
  --layer-unit:  #10b981;
  --layer-sec:   #eab308;
  --layer-integ: #3b82f6;
  --layer-e2e:   #a78bfa;

  /* status */
  --status-pass: #10b981;
  --status-fail: #f43f5e;
  --status-run:  #eab308;
  --status-pend: #334155;
  --status-skip: #475569;

  /* text */
  --tx:     #e2e8f0;
  --tx-2:   #94a3b8;
  --tx-3:   #64748b;
  --tx-4:   #334155;
  --tx-inv: #0a0d12;

  /* lines */
  --line:        #1e2530;
  --line-2:      #2a3140;
  --line-3:      #3a4250;
  --line-focus:  #14b8a6;

  /* glows */
  --glow-pass:  0 0 6px rgba(16,185,129,0.55);
  --glow-fail:  0 0 6px rgba(244,63,94,0.55);
  --glow-run:   0 0 6px rgba(234,179,8,0.55);
}

[data-theme="light"] {
  --bg-base:     #f8fafb;
  --bg-panel:    #ffffff;
  --bg-raised:   #f1f5f9;
  --bg-well:     #e8edf2;
  --bg-input:    #f1f5f9;

  --teal:        #0d9488;
  --teal-hover:  #0f766e;
  --teal-soft:   rgba(13,148,136,0.06);
  --teal-border: rgba(13,148,136,0.18);
  --teal-glow:   0 0 24px rgba(13,148,136,0.06);

  --layer-unit:  #059669;
  --layer-sec:   #ca8a04;
  --layer-integ: #2563eb;
  --layer-e2e:   #7c3aed;

  --status-pass: #059669;
  --status-fail: #e11d48;
  --status-run:  #ca8a04;
  --status-pend: #cbd5e1;
  --status-skip: #94a3b8;

  --tx:     #0f172a;
  --tx-2:   #475569;
  --tx-3:   #94a3b8;
  --tx-4:   #cbd5e1;
  --tx-inv: #f8fafb;

  --line:       #e2e8f0;
  --line-2:     #cbd5e1;
  --line-3:     #94a3b8;
  --line-focus: #0d9488;
}

/* fonts */
:root {
  --fn-sans: 'Geist', 'Inter', system-ui, sans-serif;
  --fn-mono: 'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace;

  --fs-xxs:  10px;
  --fs-xs:   11px;
  --fs-sm:   12.5px;
  --fs-base: 13.5px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   22px;
  --fs-xxl:  28px;
  --fs-hero: 34px;

  --fw-reg:   400;
  --fw-med:   500;
  --fw-sbold: 600;
  --fw-bold:  700;
  --fw-black: 800;

  /* radii */
  --r-none: 0;
  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   7px;
  --r-lg:   10px;
  --r-pill: 999px;

  /* spacing (4-step) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;
  --sp-9: 64px;
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fn-mono);
  font-size: var(--fs-base);
  background: var(--bg-base);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

@keyframes ttt-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }
@keyframes ttt-spin  { from { transform: rotate(0) } to { transform: rotate(360deg) } }
@keyframes ttt-fade-up { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* section header (// SECTION NAME) */
.ttt-section-h {
  font-family: var(--fn-mono);
  font-size: var(--fs-xxs);
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: var(--fw-bold);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ttt-section-h::before {
  content: "///";
  color: var(--tx-4);
}