/*
  SM DESIGN SYSTEM
  1. Foundations: raw scales and semantic tokens
  2. Primitives: layout, type, surfaces, accessibility
  3. Components: buttons, fields, navigation controls
*/

@font-face { font-family: 'Geist'; src: url('assets/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('assets/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Pixel Square'; src: url('assets/fonts/GeistPixel-Square.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Geist Pixel Grid'; src: url('assets/fonts/GeistPixel-Grid.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Geist Pixel Circle'; src: url('assets/fonts/GeistPixel-Circle.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Geist Pixel Triangle'; src: url('assets/fonts/GeistPixel-Triangle.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Geist Pixel Line'; src: url('assets/fonts/GeistPixel-Line.woff2') format('woff2'); font-display: swap; }

:root {
  color-scheme: light;

  /* Raw color scale — edit here to rebrand the whole product. */
  --sm-blue-50: #edf2ff;
  --sm-blue-100: #dbe5ff;
  --sm-blue-500: #3f68ff;
  --sm-blue-600: #2454ff;
  --sm-blue-700: #163dd6;
  --sm-slate-0: #ffffff;
  --sm-slate-25: #f7f9fd;
  --sm-slate-50: #edf1f8;
  --sm-slate-200: #dbe1ec;
  --sm-slate-500: #687186;
  --sm-slate-900: #0d1220;
  --sm-night-950: #080b14;

  /* Typography. */
  --font-sans: 'Geist', sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --font-pixel-square: 'Geist Pixel Square', sans-serif;
  --font-pixel-grid: 'Geist Pixel Grid', sans-serif;
  --font-pixel-circle: 'Geist Pixel Circle', sans-serif;
  --font-pixel-triangle: 'Geist Pixel Triangle', sans-serif;
  --font-pixel-line: 'Geist Pixel Line', sans-serif;
  --text-2xs: 8px;
  --text-xs: 10px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 18px;
  --leading-tight: 1.1;
  --leading-body: 1.55;

  /* Spacing: 4px base grid. */
  --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-15: 60px;
  --space-19: 76px;

  /* Sizing and layout. */
  --size-header: 54px;
  --size-content: 760px;
  --size-shell: 1150px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-round: 999px;

  /* Motion and elevation. */
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 180ms;
  --duration-base: 250ms;
  --shadow-float: 0 20px 48px rgba(19,20,24,.16), 0 5px 14px rgba(19,20,24,.08);
  --shadow-panel: 0 20px 45px rgba(13,18,32,.14);

  /* Semantic tokens consumed by every page. */
  --ink: var(--sm-slate-900);
  --paper: var(--sm-slate-25);
  --panel: var(--sm-slate-0);
  --muted: var(--sm-slate-500);
  --line: var(--sm-slate-200);
  --soft: var(--sm-slate-50);
  --accent: var(--sm-blue-600);
  --accent-ink: var(--sm-slate-0);
  --card: #111827;
  --card-ink: var(--sm-slate-0);
  --grid: rgba(36,84,255,.035);
  --section-space: var(--space-19);
  --section-pad: var(--space-15);
}

body.dark {
  color-scheme: dark;
  --ink: #f3f6ff;
  --paper: var(--sm-night-950);
  --panel: #0f1523;
  --muted: #98a3ba;
  --line: #263149;
  --soft: #111a2c;
  --accent: #718cff;
  --accent-ink: #071022;
  --card: #141c2e;
  --card-ink: #f3f6ff;
  --grid: rgba(113,140,255,.055);
  --shadow-panel: 0 22px 52px rgba(0,0,0,.45);
}

/* Base and accessibility. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; transition: color .35s ease, background-color .35s ease; }
a { color: inherit; text-decoration: none; }
:where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Layout primitives. */
.ds-container { width: min(var(--size-shell), calc(100% - 40px)); margin-inline: auto; }
.ds-content { width: min(var(--size-content), calc(100% - 48px)); margin-inline: auto; }
.ds-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.ds-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-2)); }
.ds-grid { display: grid; gap: var(--grid-gap, var(--space-3)); }
.ds-surface { color: var(--ink); background: var(--panel); border: 1px solid var(--line); }
.ds-rule-block { border-block: 1px solid var(--line); }
.ds-rule-inline { border-inline: 1px solid var(--line); }

/* Type primitives. */
.eyebrow, .ds-eyebrow { margin: 0 0 25px; color: var(--muted); font: var(--text-xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ds-body { color: var(--muted); font: var(--text-md)/var(--leading-body) var(--font-sans); }
.ds-label { color: var(--muted); font: var(--text-2xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* Button component. Default remains compatible with .site-button. */
.site-button, .ds-button {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--paper);
  background: var(--ink);
  font: 400 11px/1 var(--font-sans);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--duration-fast) ease, color var(--duration-fast) ease, background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.site-button span, .ds-button span { font: inherit; letter-spacing: inherit; }
.site-button svg, .ds-button svg { width: 14px; height: 14px; flex: 0 0 auto; }
.site-button:hover, .ds-button:hover { color: var(--accent-ink); background: var(--accent); transform: translateY(-1px); }
.site-button:disabled, .ds-button:disabled { opacity: .45; pointer-events: none; }
.ds-button--secondary { color: var(--ink); background: var(--panel); border-color: var(--line); }
.ds-button--ghost { color: var(--ink); background: transparent; }
.ds-button--accent { color: var(--accent-ink); background: var(--accent); }
.ds-button--sm { min-height: 24px; padding: 6px 10px; font-size: var(--text-xs); }
.ds-button--lg { min-height: 40px; padding: 12px 18px; font-size: var(--text-md); }
.ds-button--icon { width: 38px; min-width: 38px; padding: 0; }

/* Form component. */
.ds-field { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font: var(--text-sm) var(--font-sans); }
.ds-input { width: 100%; min-height: 40px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-none); color: var(--ink); background: var(--paper); font: inherit; }
.ds-input:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ds-input:focus { border-color: var(--accent); outline: 0; }

@media (max-width: 640px) {
  :root { --section-space: 58px; --section-pad: 48px; }
  .ds-container { width: 100%; }
  .ds-content { width: calc(100% - 36px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Scroll-triggered reveal: section fades/slides up as it enters the
   viewport (see IntersectionObserver wiring in script.js). */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .6, .2, 1), transform .7s cubic-bezier(.2, .6, .2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Smooth cross-fade between pages (native View Transitions API). Browsers
   without support just navigate normally — no fallback needed. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: sm-page-out .32s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: sm-page-in .38s cubic-bezier(.2, 0, .2, 1) both; }

@keyframes sm-page-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes sm-page-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}