/* ============================================================
   BITSZ — Colors & Type
   Brand palette: green + black only (blue removed per brand update)
   ============================================================ */

/* ---------- Fonts (Google Fonts fallbacks) ----------
   The logo uses a custom bold-italic extended sans. Nearest
   Google Fonts substitute = Saira (Condensed weights 800/900 italic).
   Body = Inter (matches the original landing page).
   Mono/eyebrow = JetBrains Mono (replaces Roboto Mono for a
   slightly more technical look, fits the "digital" vibe).
   NOTE: substitutions — ask user for official files if available.
------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,700;0,800;0,900;1,800;1,900&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------------- CORE PALETTE ---------------- */
  /* Blacks / night */
  --night-950: #050807;   /* deepest bg */
  --night-900: #0a0f0d;   /* page bg */
  --night-850: #0d1411;   /* card bg */
  --night-800: #111a16;   /* elevated card */
  --night-700: #1a2620;   /* hairline / border */
  --night-600: #253530;   /* hover border */
  --night-500: #3a4d45;   /* muted divider */

  /* Greens — from logo "Z" (#22c55e territory, slightly desaturated) */
  --green-50:  #ecfdf3;
  --green-100: #d1fadf;
  --green-200: #a7f3c6;
  --green-300: #6ee7a8;
  --green-400: #34d17e;   /* hover */
  --green-500: #22c55e;   /* BRAND PRIMARY — matches logo Z */
  --green-600: #16a34a;   /* pressed */
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;

  /* Neutrals (cool gray, pulled toward green) */
  --fg-1: #f4f7f5;        /* primary text on dark */
  --fg-2: #c5cec8;        /* body text */
  --fg-3: #8a968f;        /* muted text */
  --fg-4: #5a665f;        /* disabled / eyebrow subtle */
  --fg-5: #38433d;        /* very muted */

  /* Semantic */
  --success: var(--green-500);
  --warning: #f5b14c;
  --danger:  #ef5a5a;
  --info:    var(--green-400);

  /* Surface aliases */
  --bg-page:        var(--night-900);
  --bg-surface:     var(--night-850);
  --bg-elevated:    var(--night-800);
  --bg-inset:       var(--night-950);
  --border-hairline: var(--night-700);
  --border-hover:    var(--night-600);
  --border-accent:   var(--green-500);

  /* Brand accents */
  --accent:          var(--green-500);
  --accent-hover:    var(--green-400);
  --accent-pressed:  var(--green-600);
  --accent-soft:     rgba(34, 197, 94, 0.10);
  --accent-glow:     rgba(34, 197, 94, 0.22);

  /* ---------------- TYPE SCALE ---------------- */
  --font-display: 'Saira', 'Arial Narrow', 'Impact', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-black:   900;

  /* Sizes (fluid-ish, but fixed here — UIs use these directly) */
  --fs-display-xl: clamp(3.5rem, 7vw, 6rem);  /* 56–96 */
  --fs-display-lg: clamp(2.75rem, 5vw, 4.5rem);
  --fs-display:    clamp(2rem, 3.5vw, 3rem);
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-micro:   0.625rem;   /* eyebrow / label */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;
  --tracking-widest:  0.25em;   /* eyebrow micro caps */

  /* ---------------- SPACING / RADII / ELEVATION ---------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;       /* pricing cards use ~40px */
  --radius-3xl: 40px;
  --radius-full: 9999px;

  /* Shadows — soft + green glow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 48px -12px rgba(0,0,0,0.55);
  --shadow-xl: 0 40px 80px -24px rgba(0,0,0,0.6);
  --shadow-glow: 0 20px 48px -8px rgba(34, 197, 94, 0.25);
  --shadow-glow-sm: 0 8px 20px -4px rgba(34, 197, 94, 0.25);
  --ring-accent: 0 0 0 3px rgba(34, 197, 94, 0.35);

  /* Background grid / texture (from landing) */
  --bg-dot-color: var(--night-700);
  --bg-dot-size: 40px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */

html, body { background: var(--bg-page); color: var(--fg-1); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--green-500); color: var(--night-950); }

/* Display / headings — use "Saira" italic for hero moments (matches logo energy) */
.display,
h1.display, h2.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-style: italic;
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-tight);
  text-transform: none;
}

h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p { color: var(--fg-2); line-height: var(--lh-relaxed); }

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Eyebrow — mono, micro caps, extra-wide tracking (brand signature) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--green-400);
}

/* Utility — brand grid background */
.bg-grid {
  background-color: var(--night-900);
  background-image: radial-gradient(var(--bg-dot-color) 1px, transparent 1px);
  background-size: var(--bg-dot-size) var(--bg-dot-size);
}

/* Utility — green glow gradient text */
.text-brand-gradient {
  background: linear-gradient(90deg, var(--green-300), var(--green-500) 60%, var(--green-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Focus ring — accessible green */
:focus-visible {
  outline: none;
  box-shadow: var(--ring-accent);
  border-radius: var(--radius-sm);
}