:root {
  color-scheme: dark;

  /* Color */
  --s-black: #000;
  --s-canvas: #050605;
  --s-surface: #0b0d0c;
  --s-surface-2: #111412;
  --s-surface-3: #171b18;
  --s-white: #f5f7f5;
  --s-text: #f2f5f2;
  --s-text-2: #a4aba6;
  --s-text-3: #78807a;
  --s-line: rgba(255, 255, 255, 0.1);
  --s-line-strong: rgba(255, 255, 255, 0.18);
  --s-accent: #91f2b8;
  --s-accent-strong: #5bdb8c;
  --s-accent-soft: rgba(145, 242, 184, 0.12);
  --s-blue: #8ec8ff;
  --s-amber: #ffd28c;
  --s-red: #ff8d86;

  /* Typography */
  --s-font:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "Segoe UI", sans-serif;
  --s-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --s-weight-regular: 400;
  --s-weight-medium: 500;
  --s-weight-semibold: 600;
  --s-weight-bold: 700;

  /* Type scale */
  --s-type-display-xl: clamp(56px, 9vw, 112px);
  --s-type-display: clamp(44px, 7vw, 80px);
  --s-type-h2: clamp(36px, 5vw, 56px);
  --s-type-h3: clamp(24px, 3vw, 32px);
  --s-type-lead: clamp(17px, 2vw, 20px);
  --s-type-body: 14px;
  --s-type-small: 12px;
  --s-type-label: 10px;

  /* Spacing */
  --s-space-1: 4px;
  --s-space-2: 8px;
  --s-space-3: 12px;
  --s-space-4: 16px;
  --s-space-6: 24px;
  --s-space-8: 32px;
  --s-space-12: 48px;
  --s-space-16: 64px;
  --s-space-24: 96px;
  --s-space-32: 128px;

  /* Shape and effects */
  --s-radius-xs: 10px;
  --s-radius-sm: 14px;
  --s-radius-md: 20px;
  --s-radius-lg: 28px;
  --s-radius-xl: 36px;
  --s-shadow:
    0 50px 120px rgba(0, 0, 0, 0.48),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --s-glass: rgba(15, 18, 16, 0.72);
  --s-page: min(1180px, calc(100vw - 48px));
  --s-reading: 680px;

  /* Motion */
  --s-motion-fast: 160ms;
  --s-motion-normal: 240ms;
  --s-motion-slow: 560ms;
  --s-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --s-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

@media (max-width: 680px) {
  :root {
    --s-page: calc(100vw - 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --s-motion-fast: 1ms;
    --s-motion-normal: 1ms;
    --s-motion-slow: 1ms;
  }
}