/* ============================================================
   Nullify Network — Design Tokens
   Liquid glass. Deep black canvas. B&W gradient typography.
   ============================================================ */

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

/* Inter — brand-supplied variable fonts */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- CANVAS (single near-black across the whole site) ---------- */
  --canvas-0: #080808;
  --canvas-1: #0A0A0A;
  --canvas-2: #0E0E0E;
  --canvas-3: #131313;

  /* ---------- FOREGROUND (mono only) ---------- */
  --fg-1: #FFFFFF;            /* primary */
  --fg-2: rgba(255,255,255,0.72); /* body */
  --fg-3: rgba(255,255,255,0.48); /* muted */
  --fg-4: rgba(255,255,255,0.28); /* placeholder */
  --fg-5: rgba(255,255,255,0.12); /* disabled */

  /* ---------- GLASS SURFACES ---------- */
  --glass-thin-bg:     rgba(255,255,255,0.04);
  --glass-thin-border: rgba(255,255,255,0.08);
  --glass-thin-blur:   20px;

  --glass-card-bg:     rgba(255,255,255,0.06);
  --glass-card-border: rgba(255,255,255,0.10);
  --glass-card-blur:   28px;

  --glass-elev-bg:     rgba(255,255,255,0.09);
  --glass-elev-border: rgba(255,255,255,0.14);
  --glass-elev-blur:   40px;

  /* Inner highlight (top edge "lit from above") */
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.10);

  /* ---------- SEMANTIC ---------- */
  --ok:     #69E29A;
  --warn:   #F2C94C;
  --err:    #F26A6A;
  --info:   #8AB4FF;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Geist', 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Outfit', 'Inter', system-ui, sans-serif;
  --font-logo:    'DM Sans', 'Inter', system-ui, sans-serif;

  /* ---------- BRAND EASING ---------- */
  --ease-brand:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- TYPE SCALE ---------- */
  --t-display:  clamp(48px, 7vw, 96px);   /* hero */
  --t-h1:       clamp(36px, 4.5vw, 64px);
  --t-h2:       clamp(28px, 3vw, 44px);
  --t-h3:       24px;
  --t-h4:       18px;
  --t-body:     16px;
  --t-body-lg:  18px;
  --t-small:    14px;
  --t-xs:       12px;

  /* ---------- TRACKING ---------- */
  --tr-display: -0.03em;
  --tr-h:       -0.02em;
  --tr-body:    0;
  --tr-eyebrow: 0.18em;

  /* ---------- LINE HEIGHT ---------- */
  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.55;

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

  /* ---------- RADII ---------- */
  --r-1:  8px;
  --r-2:  12px;
  --r-3:  16px;
  --r-4:  20px;
  --r-5:  28px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --sh-card:  0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 60px -20px rgba(0,0,0,0.6);
  --sh-card-hover: 0 1px 0 rgba(255,255,255,0.10) inset, 0 24px 80px -20px rgba(0,0,0,0.7), 0 0 40px rgba(255,255,255,0.08);
  --sh-button-glow: 0 0 32px rgba(255,255,255,0.18);
  --sh-elev:  0 1px 0 rgba(255,255,255,0.10) inset, 0 40px 120px -30px rgba(0,0,0,0.85);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-micro:  cubic-bezier(0.4, 0, 0.2, 1);
  --d-hover:     150ms;
  --d-state:     240ms;
  --d-enter:     600ms;

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --gutter: 24px;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--canvas-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero canvas wash — deep black with soft white light pools (matches reference image) */
.canvas-wash {
  background:
    radial-gradient(60% 40% at 20% 20%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(50% 50% at 80% 30%, rgba(255,255,255,0.04), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(255,255,255,0.05), transparent 70%),
    var(--canvas-0);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}

.t-h1, h1 { font: 500 var(--t-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--tr-h); }
.t-h2, h2 { font: 500 var(--t-h2)/var(--lh-snug)  var(--font-display); letter-spacing: var(--tr-h); }
.t-h3, h3 { font: 500 var(--t-h3)/var(--lh-snug)  var(--font-display); letter-spacing: var(--tr-h); }
.t-h4, h4 { font: 600 var(--t-h4)/var(--lh-snug)  var(--font-body); }

.t-body  { font: 400 var(--t-body)/var(--lh-body) var(--font-body);  color: var(--fg-2); }
.t-body-lg { font: 400 var(--t-body-lg)/var(--lh-body) var(--font-body); color: var(--fg-2); }
.t-small { font: 400 var(--t-small)/var(--lh-body) var(--font-body); color: var(--fg-3); }
.t-mono  { font: 500 var(--t-small)/1.4 var(--font-mono); color: var(--fg-2); }

/* B&W gradient text — for headlines + key metrics */
.t-gradient {
  background: linear-gradient(180deg, #FFFFFF 0%, #8A8A92 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   GLASS PRIMITIVES
   ============================================================ */
.glass-thin {
  background: var(--glass-thin-bg);
  border: 1px solid var(--glass-thin-border);
  backdrop-filter: blur(var(--glass-thin-blur));
  -webkit-backdrop-filter: blur(var(--glass-thin-blur));
  box-shadow: var(--glass-highlight);
}
.glass-card {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  backdrop-filter: blur(var(--glass-card-blur));
  -webkit-backdrop-filter: blur(var(--glass-card-blur));
  box-shadow: var(--glass-highlight), var(--sh-card);
}
.glass-elev {
  background: var(--glass-elev-bg);
  border: 1px solid var(--glass-elev-border);
  backdrop-filter: blur(var(--glass-elev-blur));
  -webkit-backdrop-filter: blur(var(--glass-elev-blur));
  box-shadow: var(--glass-highlight), var(--sh-elev);
}

/* ============================================================
   BUTTON
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-3);
  font: 500 15px/1 var(--font-body);
  letter-spacing: -0.005em;
  color: var(--fg-1);
  background: var(--glass-thin-bg);
  border: 1px solid var(--glass-thin-border);
  backdrop-filter: blur(var(--glass-thin-blur));
  -webkit-backdrop-filter: blur(var(--glass-thin-blur));
  box-shadow: var(--glass-highlight);
  cursor: pointer;
  transition: transform var(--d-hover) var(--ease-micro),
              border-color var(--d-state) var(--ease-out),
              background var(--d-state) var(--ease-out),
              box-shadow var(--d-state) var(--ease-out);
  user-select: none;
}
.btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
  box-shadow: var(--glass-highlight), var(--sh-button-glow);
  transform: scale(1.02);
}
.btn:active { transform: scale(0.98); box-shadow: var(--glass-highlight); }

.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; border-radius: var(--r-3); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: var(--r-2); }
.btn-ghost { background: transparent; border-color: var(--fg-5); }
.btn-ghost:hover { background: var(--glass-thin-bg); }

/* Icon-only square button */
.btn-icon {
  width: 40px; height: 40px; padding: 0;
  border-radius: var(--r-2);
}

/* ── Custom scrollbar ─────────────────────────────────────────────────────────
   Thin, dark, matches the glass/black canvas aesthetic.
   WebKit (Chrome, Safari, Edge) + Firefox.
   ─────────────────────────────────────────────────────────────────────────── */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}

/* WebKit */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 10px;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22);
}
::-webkit-scrollbar-corner {
  background: transparent;
}