/* =============================================================
   EightbyZero — Foundations
   Tokens for color, type, spacing, radius, shadow, motion.
   Stark, tech-forward, sleek. Dark by default.
   ============================================================= */

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

:root {
  /* ---- Brand colors ---- */
  --ebz-green-500: #10C880;   /* primary brand emerald */
  --ebz-green-400: #1FDB94;   /* hover / accents on dark */
  --ebz-green-600: #0BA86A;   /* press / deeper */
  --ebz-green-50:  #E6FBF2;   /* subtle bg on light surfaces */
  --ebz-green-900: #052D1E;   /* deepest tonal use */

  --ebz-coral-500: #F87878;   /* attention / problem framing */
  --ebz-coral-400: #FF9090;
  --ebz-coral-600: #E45656;

  /* ---- Neutral scale (warm-cool charcoal stack) ---- */
  --ebz-ink-000: #F8F8F8;     /* paper / inverse text on dark */
  --ebz-ink-100: #E8E8E8;
  --ebz-ink-200: #D5D5D5;
  --ebz-ink-300: #959595;
  --ebz-ink-400: #757575;
  --ebz-ink-500: #585858;
  --ebz-ink-600: #484848;     /* canonical brand background */
  --ebz-ink-700: #383838;
  --ebz-ink-800: #2A2A2A;
  --ebz-ink-900: #1A1A1A;
  --ebz-ink-950: #0E0E0E;

  /* ---- Semantic surface tokens (default = dark theme) ---- */
  --bg:           var(--ebz-ink-600);
  --bg-elev-1:    var(--ebz-ink-500);
  --bg-elev-2:    var(--ebz-ink-400);
  --bg-sunken:    var(--ebz-ink-700);
  --bg-inverse:   var(--ebz-ink-000);

  --fg-1:         var(--ebz-ink-000);   /* primary text */
  --fg-2:         var(--ebz-ink-200);   /* body / secondary */
  --fg-3:         var(--ebz-ink-300);   /* muted / labels */
  --fg-4:         var(--ebz-ink-400);   /* disabled / hints */
  --fg-inverse:   var(--ebz-ink-900);

  --accent:       var(--ebz-green-500);
  --accent-hover: var(--ebz-green-400);
  --accent-press: var(--ebz-green-600);
  --attention:    var(--ebz-coral-500);

  --border-1:     rgba(255,255,255,0.10);
  --border-2:     rgba(255,255,255,0.18);
  --border-accent: var(--ebz-green-500);
  --border-attention: var(--ebz-coral-500);

  --focus-ring:   0 0 0 2px var(--bg), 0 0 0 4px var(--ebz-green-500);

  /* ---- Type ---- */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-mark: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace; /* for the brand numeric mark */

  /* Scale — minimal, geometric, no decorative serif. */
  --fs-display: clamp(48px, 6.4vw, 84px);
  --fs-h1:      clamp(36px, 4.4vw, 56px);
  --fs-h2:      clamp(28px, 3.2vw, 40px);
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-mini:    12px;
  --fs-micro:   11px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.5;
  --lh-loose:   1.65;

  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-body:    0;
  --ls-label:   0.04em;
  --ls-caps:    0.12em;     /* eyebrow / kicker copy */

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

  /* ---- Radii (kept small. Stark, not friendly) ---- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-5: 12px;
  --r-pill: 999px;

  /* ---- Shadows (subtle — used sparingly) ---- */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.20);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 0 1px rgba(16,200,128,0.35), 0 0 24px rgba(16,200,128,0.20);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0, 0.45, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;

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

/* ============== Light surface override (rarely used) ============== */
[data-theme="light"] {
  --bg:        var(--ebz-ink-000);
  --bg-elev-1: #FFFFFF;
  --bg-elev-2: #FFFFFF;
  --bg-sunken: #F1F1F1;
  --bg-inverse: var(--ebz-ink-900);

  --fg-1: var(--ebz-ink-900);
  --fg-2: var(--ebz-ink-700);
  --fg-3: var(--ebz-ink-500);
  --fg-4: var(--ebz-ink-300);

  --border-1: rgba(0,0,0,0.08);
  --border-2: rgba(0,0,0,0.14);
}

/* ===================== Base resets ===================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-feature-settings: "ss01","cv11"; /* clean digits / open shapes */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===================== Semantic type styles ===================== */
.display, h1.display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h2, .h2 {
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin: 0;
}
h3, .h3 {
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin: 0;
}
h4, .h4 {
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}
.lede {
  font-size: var(--fs-h4);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.small  { font-size: var(--fs-small); }
.mini   { font-size: var(--fs-mini);  }
.micro  { font-size: var(--fs-micro); }

.eyebrow, .kicker {
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.label {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--fg-3);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01","cv01";
}
code {
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: var(--r-2);
  color: var(--fg-1);
}

/* ===================== Brand text patterns ===================== */
.brand-mark {
  font-weight: 800;
  letter-spacing: var(--ls-snug);
}
.brand-mark .num,
.eight, .zero { color: var(--accent); }   /* "8by0" green digits, white middle */
.by  { color: var(--fg-1); }

/* ===================== Canonical wordmark ===================== */
/* Used in nav, footer, slide lockups — matches the heavier
   treatment of assets/wordmark.svg (font-weight 800 + a hair of
   text-stroke + tighter tracking). Apply to the outer span; child
   spans carry the per-color paint. */
.wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.022em;
  white-space: nowrap;
}
.wordmark > span {
  -webkit-text-stroke: 0.4px currentColor;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }