@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
/* ===== tokens/fonts.css ===== */
/* Webfonts — Web'up
   Display / titles: Bricolage Grotesque (variable display grotesque, Google Fonts).
   UI / body: Space Grotesk · Mono/data: JetBrains Mono. */


/* ===== tokens/colors.css ===== */
/* ============================================================
   Web Up — Color tokens
   Budget: ~80% pure white · ~10% near-black ink · ~5% bluish mist
            · ~5% cyan accent. Cyan is a LIGHT accent → dark text sits
            on it; never use raw cyan for text on white (use --accent-ink).
   ============================================================ */
:root {
  /* — Core neutrals — */
  --white:        #FFFFFF;
  --ink-900:      #02080F; /* signature near-black navy */
  --ink-800:      #0A1420;
  --ink-700:      #18222F;
  --ink-600:      #2A3543;
  --ink-500:      #4C5A6B; /* muted body */
  --ink-400:      #7A8799;
  --ink-300:      #AEB9C7;

  /* — Bluish off-white surfaces & lines (the 5% mist) — */
  --mist-50:      #F7FAFD;
  --mist-100:     #EEF3F9;
  --mist-200:     #E2E9F2;
  --line:         #E2E9F2;
  --line-strong:  #CDD7E4;

  /* — Brand accent — green #19E57F (replaces the former cyan).
     Variable names kept as --cyan-* for stability across the kit. — */
  --cyan-100:     #D7FBEA;
  --cyan-200:     #A3F3CB;
  --cyan-400:     #19E57F; /* brand accent */
  --cyan-500:     #10CB6F;
  --cyan-600:     #0AAE5F; /* hover */
  --cyan-700:     #0AA85D; /* accessible accent text on white */
  --cyan-800:     #066B3D;

  /* — Semantic status — */
  --green-500:    #1FB877;
  --amber-500:    #F4A521;
  --red-500:      #E5484D;

  /* ===== Semantic aliases ===== */
  --text-strong:  var(--ink-900);
  --text-body:    #2B3744;
  --text-muted:   var(--ink-500);
  --text-faint:   var(--ink-400);
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #9FB0C2;
  --text-on-accent: var(--ink-900);

  --surface-page:   var(--white);
  --surface-subtle: var(--mist-100);
  --surface-sunken: var(--mist-50);
  --surface-dark:   var(--ink-900);
  --surface-card:   var(--white);

  --border-subtle:  var(--line);
  --border-strong:  var(--line-strong);
  --border-dark:    rgba(255,255,255,.12);

  --accent:        var(--cyan-400);
  --accent-hover:  var(--cyan-600);
  --accent-ink:    var(--cyan-700); /* cyan that passes contrast as text/icon on white */
  --accent-tint:   var(--cyan-100);

  --focus-ring:    0 0 0 3px rgba(25,229,127,.45);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   Web'up — Typography tokens
   Display / titles = Bricolage Grotesque (variable display grotesque, Google Fonts).
   UI / body = Space Grotesk. Mono = JetBrains Mono.
   ============================================================ */
:root {
  --font-display: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
  --font-sans:    'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* — Display / heading scale (big, punchy) — */
  --fs-display-1: clamp(48px, 7.2vw, 92px); /* @kind font */ /* hero monster headline */
  --fs-display-2: clamp(40px, 5.4vw, 68px); /* @kind font */
  --fs-h1:        clamp(34px, 4vw, 50px); /* @kind font */
  --fs-h2:        clamp(28px, 3vw, 38px); /* @kind font */
  --fs-h3:        26px; /* @kind font */
  --fs-h4:        21px; /* @kind font */

  /* — Body / UI scale — */
  --fs-lead:      20px; /* @kind font */
  --fs-body:      17px; /* @kind font */
  --fs-sm:        15px; /* @kind font */
  --fs-xs:        13px; /* @kind font */
  --fs-eyebrow:   12.5px; /* @kind font */

  /* — Weights — */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* — Line heights — */
  --lh-display:   0.94; /* @kind font */
  --lh-tight:     1.06; /* @kind font */
  --lh-snug:      1.25; /* @kind font */
  --lh-body:      1.62; /* @kind font */

  /* — Letter spacing — */
  --ls-display:  -0.025em; /* @kind font */
  --ls-tight:    -0.015em; /* @kind font */
  --ls-normal:    0; /* @kind font */
  --ls-eyebrow:   0.16em; /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   Web Up — Spacing & layout tokens (4px base grid)
   ============================================================ */
:root {
  --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;

  /* — Layout — */
  --container-max: 1200px; /* @kind spacing */
  --container-wide: 1320px; /* @kind spacing */
  --gutter:        24px; /* @kind spacing */
  --section-y:     clamp(64px, 9vw, 128px); /* @kind spacing */
}

/* ===== tokens/radius.css ===== */
/* ============================================================
   Web Up — Radius tokens
   Brand stance: SHARP / minimal. Corners stay crisp and architectural.
   Pill exists only for chips/avatars, used sparingly.
   ============================================================ */
:root {
  --radius-0:    0;
  --radius-xs:   2px;
  --radius-sm:   4px;   /* default — buttons, inputs */
  --radius-md:   6px;   /* cards */
  --radius-lg:   10px;  /* large panels (max) */
  --radius-pill: 999px; /* chips, avatars only */
}

/* ===== tokens/elevation.css ===== */
/* ============================================================
   Web Up — Elevation (shadows) & motion
   Two shadow languages:
   1. Soft ambient (subtle, bluish) for floating cards.
   2. Hard offset "pop" (no blur) — the bold/punchy brand signature,
      used on hero CTAs and feature tiles.
   ============================================================ */
:root {
  --shadow-xs:  0 1px 2px rgba(2,8,15,.06);
  --shadow-sm:  0 2px 10px rgba(2,8,15,.06);
  --shadow-md:  0 10px 28px rgba(2,8,15,.09);
  --shadow-lg:  0 28px 64px rgba(2,8,15,.14);

  /* Hard offset pops (the signature) */
  --pop-ink:    5px 5px 0 0 var(--ink-900);
  --pop-cyan:   5px 5px 0 0 var(--cyan-400);
  --pop-sm:     3px 3px 0 0 var(--ink-900);

  /* — Motion — */
  --ease-out:    cubic-bezier(.22,.7,.24,1); /* @kind other */
  --ease-spring: cubic-bezier(.34,1.4,.5,1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur:         200ms; /* @kind other */
  --dur-slow:    380ms; /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ============================================================
   Web Up — Base element defaults (kept minimal, opt-in via tokens)
   ============================================================ */
:root {
  color-scheme: light;
}
body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--cyan-200); color: var(--ink-900); }

/* Utility text styles consumers can lean on */
.wu-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.wu-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}