:root {
  /* Brand */
  --c-bg: #1f252e;
  --c-bg-deep: #171c23;
  --c-bg-soft: #262e39;
  --c-surface: rgba(38, 46, 57, 0.86);
  --c-surface-solid: #29323e;
  --c-surface-raised: #303b48;

  --c-main: #00a6d6;
  --c-main-2: #6ebbd5;
  --c-main-soft: #d9f0f6;
  --c-main-fade: rgba(0, 166, 214, 0.14);
  --c-main-line: rgba(110, 187, 213, 0.28);

  --c-text: #f7fbfd;
  --c-text-soft: #d9e4e9;
  --c-muted: #aab7c1;
  --c-subtle: #7f8d98;
  --c-line: rgba(217, 240, 246, 0.12);
  --c-line-strong: rgba(217, 240, 246, 0.22);

  --c-white: #ffffff;
  --c-black: #000000;
  --c-danger: #ff6b6b;
  --c-success: #5ed6a0;
  --c-focus: #8fe6ff;

  /* Gradients */
  --g-main: linear-gradient(135deg, var(--c-main), var(--c-main-2));
  --g-surface: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  --g-page:
    radial-gradient(circle at 82% 16%, rgba(0,166,214,.14), transparent 28rem),
    radial-gradient(circle at 12% 72%, rgba(110,187,213,.08), transparent 34rem),
    linear-gradient(180deg, var(--c-bg-deep), var(--c-bg));

  /* Typography */
  --font-display: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fs-100: .75rem;
  --fs-200: .875rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: clamp(1.25rem, 1.1rem + .7vw, 1.75rem);
  --fs-600: clamp(1.75rem, 1.35rem + 1.4vw, 2.75rem);
  --fs-700: clamp(2.4rem, 1.6rem + 3vw, 4.75rem);
  --fs-800: clamp(3rem, 1.8rem + 5vw, 7rem);

  --lh-tight: 1.08;
  --lh-title: 1.18;
  --lh-body: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --ls-tight: -.04em;
  --ls-title: -.025em;
  --ls-wide: .12em;

  /* Spacing */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --site-max: 76rem;
  --text-max: 42rem;
  --page-pad: clamp(1rem, 4vw, 3rem);
  --section-gap: clamp(5rem, 9vw, 9rem);

  /* Shape and depth */
  --r-xs: .5rem;
  --r-sm: .75rem;
  --r-md: 1.125rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  --sh-sm: 0 .5rem 1.25rem rgba(0,0,0,.18);
  --sh-md: 0 1.25rem 3rem rgba(0,0,0,.24);
  --sh-lg: 0 2rem 5rem rgba(0,0,0,.32);
  --sh-glow: 0 0 2rem rgba(0,166,214,.22);

  --bd: 1px solid var(--c-line);
  --bd-strong: 1px solid var(--c-line-strong);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  /* Layers */
  --z-base: 0;
  --z-float: 10;
  --z-nav: 100;
  --z-menu: 200;
  --z-modal: 300;
}