/* Design tokens. Every color, radius, spacing and type size on the site comes from here. */

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/unbounded-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/unbounded-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/unbounded-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2-variations'), url('../fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
}

:root {
  /* surfaces */
  --ink: #06070a;
  --ink-2: #090b0f;
  --surface: #0d0f14;
  --surface-2: #12151c;
  --surface-3: #181c25;
  --glass: rgb(255 255 255 / 0.035);
  --glass-2: rgb(255 255 255 / 0.06);
  --line: rgb(255 255 255 / 0.08);
  --line-2: rgb(255 255 255 / 0.14);
  --line-3: rgb(255 255 255 / 0.22);

  /* text */
  --text: #f4f6fa;
  --text-2: #b4bbc9;
  --text-3: #7a8294;

  /* brand + spectrum */
  --lime: #d7f70d;
  --lime-2: #e6fb5c;
  --lime-ink: #0a0d02;
  --violet: #7c5cff;
  --cyan: #22d3ee;
  --magenta: #ff4fd8;
  --amber: #ffb547;
  --teal: #2dd4bf;
  --danger: #ff5c7a;
  --success: #3ee08f;

  --accent: var(--lime);

  /* radius */
  --r-xs: 12px;
  --r-sm: 20px;
  --r-md: 28px;
  --r-lg: 36px;
  --r-pill: 999px;

  /* spacing: 4px base, 8-point rhythm */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --container: 1240px;
  --gutter: 24px;
  --pad-x: clamp(16px, 4vw, 40px);
  --section-y: clamp(96px, 12vw, 160px);
  --header-h: 72px;

  /* type */
  --font-display: 'Unbounded', 'Inter', system-ui, sans-serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-2xl: clamp(1.875rem, 1.3rem + 2vw, 2.875rem);
  --fs-3xl: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --fs-hero: clamp(2.5rem, 1.3rem + 4.6vw, 5.25rem);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 700ms;

  --shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 50px -24px rgb(0 0 0 / 0.8);
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent), 0 18px 60px -18px color-mix(in oklab, var(--accent) 55%, transparent);
}

/* Per-product accent. Any element (or the body) can set one. */
.accent-lime { --accent: var(--lime); }
.accent-violet { --accent: var(--violet); }
.accent-cyan { --accent: var(--cyan); }
.accent-magenta { --accent: var(--magenta); }
.accent-amber { --accent: var(--amber); }
.accent-teal { --accent: var(--teal); }