/*
 * ZeroBloat — saas-template Design System
 * Global CSS custom properties for zerobloat.io / any SaaS niche site.
 * Loaded site-wide when saas-template is active.
 */

:root {
  /* ─── Backgrounds ─────────────────────────────── */
  --zb-bg-base:     #0A0A0F;
  --zb-bg-surface:  #0F0F17;
  --zb-bg-elevated: #161622;
  --zb-bg-overlay:  #1C1C2A;

  /* ─── Text ────────────────────────────────────── */
  --zb-text:          #F8FAFC;
  --zb-text-muted:    #CBD5E1;
  --zb-text-dim:      #94A3B8;
  --zb-text-disabled: #475569;

  /* ─── Accent — violet ─────────────────────────── */
  --zb-accent:       #7C3AED;
  --zb-accent-hover: #6D28D9;
  --zb-accent-light: rgba(124, 58, 237, 0.12);
  --zb-accent-glow:  rgba(124, 58, 237, 0.15);
  --zb-accent-ring:  rgba(124, 58, 237, 0.30);

  /* ─── Semantic colours ────────────────────────── */
  --zb-success: #10B981;
  --zb-warning: #F59E0B;
  --zb-error:   #EF4444;
  --zb-info:    #3B82F6;

  /* ─── Borders ─────────────────────────────────── */
  --zb-border:       rgba(255, 255, 255, 0.08);
  --zb-border-hover: rgba(255, 255, 255, 0.16);

  /* ─── Shadows ─────────────────────────────────── */
  --zb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --zb-shadow:    0 2px 8px rgba(0, 0, 0, 0.5);
  --zb-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --zb-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7);

  /* ─── Typography ──────────────────────────────── */
  --zb-font:      'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --zb-font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  --zb-text-xs:   0.75rem;   /* 12px */
  --zb-text-sm:   0.875rem;  /* 14px */
  --zb-text-base: 1rem;      /* 16px */
  --zb-text-lg:   1.125rem;  /* 18px */
  --zb-text-xl:   1.25rem;   /* 20px */
  --zb-text-2xl:  1.5rem;    /* 24px */
  --zb-text-3xl:  1.875rem;  /* 30px */
  --zb-text-4xl:  2.25rem;   /* 36px */
  --zb-text-5xl:  3rem;      /* 48px */
  --zb-text-6xl:  3.75rem;   /* 60px */
  --zb-text-7xl:  4.5rem;    /* 72px */

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

  /* ─── Layout ──────────────────────────────────── */
  --zb-container:      1280px;
  --zb-container-pad:  clamp(20px, 3.75vw, 48px);
  --zb-section-py:     96px;
  --zb-section-py-sm:  64px;

  /* ─── Radius ──────────────────────────────────── */
  --zb-radius-sm:   6px;
  --zb-radius:      10px;
  --zb-radius-lg:   14px;
  --zb-radius-xl:   20px;
  --zb-radius-pill: 999px;

  /* ─── Motion ──────────────────────────────────── */
  --zb-ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --zb-ease-io:  cubic-bezier(0.4, 0, 0.2, 1);
  --zb-dur-fast: 150ms;
  --zb-dur:      250ms;
  --zb-dur-slow: 400ms;
}

/* ─── Base resets for saas-template ──────────────── */
/* Force dark canvas — templates.css sets body{bg:#fff}, this wins via !important */
html:has(body.zb-saas),
body.zb-saas {
  background-color: var(--zb-bg-base) !important;
  color: var(--zb-text) !important;
}

body.zb-saas {
  font-family: var(--zb-font);
  font-size: var(--zb-text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override templates.css heading/paragraph colors for saas context */
body.zb-saas h1,
body.zb-saas h2,
body.zb-saas h3,
body.zb-saas h4,
body.zb-saas h5,
body.zb-saas h6 {
  color: var(--zb-text);
  margin-top: 0;
  margin-bottom: 0;
}
body.zb-saas p { margin-top: 0; margin-bottom: 0; }
body.zb-saas a { color: inherit; }

/* ─── Container utility ───────────────────────────── */
.zb-container {
  max-width: var(--zb-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--zb-container-pad);
  padding-right: var(--zb-container-pad);
}

/* ─── Section utility ─────────────────────────────── */
/* Each saas section gets explicit bg so transparent sections don't leak white */
.zb-section {
  padding-top: var(--zb-section-py);
  padding-bottom: var(--zb-section-py);
  background-color: var(--zb-bg-base);
}

.zb-section--sm {
  padding-top: var(--zb-section-py-sm);
  padding-bottom: var(--zb-section-py-sm);
}

.zb-section--surface {
  background-color: var(--zb-bg-surface);
  border-top: 1px solid var(--zb-border);
  border-bottom: 1px solid var(--zb-border);
}

/* ─── Eyebrow label ───────────────────────────────── */
.zb-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zb-accent);
  margin-bottom: 16px;
}

/* ─── Primary button ──────────────────────────────── */
.zb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  height: 44px;
  border-radius: var(--zb-radius);
  font-family: var(--zb-font);
  font-size: var(--zb-text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--zb-dur-fast) var(--zb-ease);
  border: none;
  outline: none;
}

.zb-btn--primary {
  background: var(--zb-accent);
  color: #fff;
}

.zb-btn--primary:hover {
  background: var(--zb-accent-hover);
  box-shadow: 0 0 0 1px var(--zb-accent), 0 4px 16px var(--zb-accent-ring);
  color: #fff;
  text-decoration: none;
}

.zb-btn--secondary {
  background: transparent;
  color: var(--zb-text);
  border: 1px solid var(--zb-border);
}

.zb-btn--secondary:hover {
  border-color: var(--zb-border-hover);
  background: rgba(255, 255, 255, 0.04);
  color: var(--zb-text);
  text-decoration: none;
}

/* ─── Card base ───────────────────────────────────── */
.zb-card {
  background: var(--zb-bg-surface);
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius-lg);
  padding: 24px;
  transition: border-color var(--zb-dur-fast) var(--zb-ease),
              box-shadow   var(--zb-dur-fast) var(--zb-ease);
}

.zb-card:hover {
  border-color: var(--zb-border-hover);
  box-shadow: var(--zb-shadow-lg);
}

/* ─── Geist font loading ──────────────────────────── */
@font-face {
  font-family: 'Geist';
  src: local('Geist'), local('Geist Regular');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: local('Geist Mono'), local('GeistMono');
  font-weight: 400;
  font-display: swap;
}

/* ─── Reduced motion guard ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}