/* ============================================================
   HomeBlindSpot — Design Tokens
   Dark-only. Electric blue accent. Geist.
   ============================================================ */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.2.5/files/geist-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.2.5/files/geist-mono-latin-wght-normal.woff2') format('woff2');
}

:root {
  /* ---------- Color — Neutrals (deep navy / near-black) ---------- */
  --hbs-bg-0:        #05070d;   /* page background, deepest */
  --hbs-bg-1:        #080b14;   /* panels */
  --hbs-bg-2:        #0c111c;   /* raised surface */
  --hbs-bg-3:        #111827;   /* card base */
  --hbs-bg-4:        #18202f;   /* hover surface */

  --hbs-line-1:      rgba(255,255,255,0.06);  /* hairline */
  --hbs-line-2:      rgba(255,255,255,0.10);  /* divider */
  --hbs-line-3:      rgba(255,255,255,0.16);  /* strong border */

  --hbs-fg-0:        #f5f7fb;   /* primary text */
  --hbs-fg-1:        #c6cdd9;   /* body */
  --hbs-fg-2:        #8a93a4;   /* muted */
  --hbs-fg-3:        #5b6477;   /* dim */
  --hbs-fg-4:        #394151;   /* placeholder */

  /* ---------- Color — Accent (electric blue) ---------- */
  --hbs-accent-50:   #eaf2ff;
  --hbs-accent-100:  #cfe0ff;
  --hbs-accent-200:  #9cc0ff;
  --hbs-accent-300:  #669bff;
  --hbs-accent-400:  #3d7bff;
  --hbs-accent-500:  #2563ff;   /* primary */
  --hbs-accent-600:  #1a4ee6;
  --hbs-accent-700:  #143bb8;
  --hbs-accent-800:  #102d8a;
  --hbs-accent-900:  #0b1e5c;

  --hbs-accent-glow: rgba(61,123,255,0.45);
  --hbs-accent-soft: rgba(37,99,255,0.12);

  /* ---------- Semantic ---------- */
  --hbs-success:     #22c55e;
  --hbs-warning:     #f59e0b;
  --hbs-danger:      #ef4444;
  --hbs-info:        var(--hbs-accent-400);

  /* ---------- Typography ---------- */
  --hbs-font-sans:   'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hbs-font-mono:   'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --hbs-fs-xs:       12px;
  --hbs-fs-sm:       13px;
  --hbs-fs-base:     15px;
  --hbs-fs-md:       17px;
  --hbs-fs-lg:       20px;
  --hbs-fs-xl:       24px;
  --hbs-fs-2xl:      32px;
  --hbs-fs-3xl:      44px;
  --hbs-fs-4xl:      60px;
  --hbs-fs-5xl:      80px;

  --hbs-lh-tight:    1.05;
  --hbs-lh-snug:     1.2;
  --hbs-lh-normal:   1.5;
  --hbs-lh-relaxed:  1.65;

  --hbs-tracking-tight:   -0.02em;
  --hbs-tracking-snug:    -0.012em;
  --hbs-tracking-normal:  0;
  --hbs-tracking-wide:    0.04em;
  --hbs-tracking-wider:   0.14em;

  /* ---------- Spacing (4px grid) ---------- */
  --hbs-s-0:   0px;
  --hbs-s-1:   4px;
  --hbs-s-2:   8px;
  --hbs-s-3:   12px;
  --hbs-s-4:   16px;
  --hbs-s-5:   20px;
  --hbs-s-6:   24px;
  --hbs-s-8:   32px;
  --hbs-s-10:  40px;
  --hbs-s-12:  48px;
  --hbs-s-16:  64px;
  --hbs-s-20:  80px;
  --hbs-s-24:  96px;
  --hbs-s-32:  128px;

  /* ---------- Radius ---------- */
  --hbs-r-xs:   4px;
  --hbs-r-sm:   6px;
  --hbs-r-md:   10px;
  --hbs-r-lg:   14px;
  --hbs-r-xl:   20px;
  --hbs-r-2xl:  28px;
  --hbs-r-pill: 999px;

  /* ---------- Shadows (dark UI — shadows are mostly inner rings + glows) ---------- */
  --hbs-shadow-xs:   0 1px 0 rgba(255,255,255,0.04) inset;
  --hbs-shadow-sm:   0 1px 2px rgba(0,0,0,0.6),
                     0 0 0 1px rgba(255,255,255,0.04) inset;
  --hbs-shadow-md:   0 4px 16px rgba(0,0,0,0.5),
                     0 0 0 1px rgba(255,255,255,0.05) inset;
  --hbs-shadow-lg:   0 18px 48px rgba(0,0,0,0.55),
                     0 0 0 1px rgba(255,255,255,0.06) inset;
  --hbs-shadow-glow: 0 8px 32px rgba(37,99,255,0.35),
                     0 0 0 1px rgba(124,162,255,0.35) inset,
                     0 1px 0 rgba(255,255,255,0.25) inset;

  /* ---------- Motion ---------- */
  --hbs-ease:        cubic-bezier(.2,.7,.2,1);
  --hbs-ease-out:    cubic-bezier(.16,1,.3,1);
  --hbs-dur-fast:    120ms;
  --hbs-dur-med:     220ms;
  --hbs-dur-slow:    420ms;

  /* ---------- Layout ---------- */
  --hbs-container:   1200px;
  --hbs-gutter:      24px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--hbs-bg-0);
  color: var(--hbs-fg-0);
  font-family: var(--hbs-font-sans);
  font-size: var(--hbs-fs-base);
  line-height: var(--hbs-lh-normal);
  letter-spacing: var(--hbs-tracking-snug);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--hbs-accent-500); color: #fff; }

/* ============================================================
   Utilities
   ============================================================ */
.hbs-grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  opacity: .6;
}

.hbs-glow-orb {
  position: absolute;
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(61,123,255,0.55) 0%,
    rgba(37,99,255,0.25) 25%,
    rgba(11,30,92,0.1) 55%,
    transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.hbs-hairline {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--hbs-line-2) 20%,
    var(--hbs-line-2) 80%,
    transparent);
}