/* Design tokens: the only place colours, type and spacing are defined.
   Dark theme only. Rough ratio: 70% black and surfaces, 22% greys, 6% orange, 2% blue. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/InterTight-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* colour */
  --bg: #0A0A0A;
  --surface: #121212;
  --surface-2: #1A1A1A;
  --border: #262626;
  --border-strong: #3A3A3A;
  --text: #F5F5F4;
  --muted: #A3A3A3;
  /* decoration only: below 4.5:1 for small text */
  --subtle: #737373;
  --accent: #FF6A13;
  --accent-soft: rgba(255, 106, 19, 0.12);
  --accent-glow: rgba(255, 106, 19, 0.35);
  --info: #3B82F6;
  --info-soft: rgba(59, 130, 246, 0.14);
  --success: #34D399;

  /* type */
  --display: 'Space Grotesk', 'Inter Tight', system-ui, sans-serif;
  --body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* fluid type scale, 375 px to 1440 px */
  --step--2: clamp(0.69rem, 0.66rem + 0.12vw, 0.75rem);
  --step--1: clamp(0.8rem, 0.77rem + 0.16vw, 0.9rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.24vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.42vw, 1.4rem);
  --step-2: clamp(1.4rem, 1.24rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.3vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.7rem + 2.3vw, 3.8rem);
  --step-5: clamp(2.8rem, 1.9rem + 4vw, 5.6rem);
  --step-hero: clamp(3.8rem, 2rem + 14vw, 15rem);

  /* space */
  --gutter: clamp(16px, 4vw, 56px);
  --section-y: clamp(96px, 14vh, 168px);
  --max: 1280px;
  --radius: 18px;
  --radius-sm: 10px;

  /* motion: springy, physical, quick */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --fast: 160ms;
  --base: 280ms;
  --slow: 520ms;

  /* layers */
  --z-grain: 1;
  --z-content: 2;
  --z-nav: 40;
  --z-drawer: 60;
  --z-overlay: 70;
  --z-toast: 80;
  --z-cursor: 90;
  --z-preloader: 100;
}