/* Design tokens.
   The `--tsw-*` custom properties on :root are the design tokens: they are the
   kit's vocabulary (space, type, colour, motion), and a site themes the kit by
   redefining them in its own stylesheet. This file holds only the token
   vocabulary (and its contrast adjustments). Element defaults and utility
   classes live in theme.css; component appearance lives in
   components/<name>/style.css. */

:root {
  color-scheme: light dark;

  --tsw-font-sans:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tsw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --tsw-text-2xs: 0.6875rem;
  --tsw-text-xs: 0.75rem;
  --tsw-text-sm: 0.875rem;
  --tsw-text-base: 1rem;
  --tsw-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --tsw-text-xl: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  --tsw-text-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --tsw-text-3xl: clamp(1.625rem, 1.35rem + 1.3vw, 2.5rem);
  --tsw-text-4xl: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --tsw-text-display: clamp(2.375rem, 1.6rem + 3.4vw, 4.75rem);

  --tsw-leading-tight: 1.08;
  --tsw-leading-snug: 1.25;
  --tsw-leading-normal: 1.5;
  --tsw-leading-relaxed: 1.65;
  --tsw-tracking-tight: -0.022em;
  --tsw-tracking-wide: 0.06em;
  --tsw-tracking-wider: 0.12em;

  --tsw-space-3xs: 0.125rem;
  --tsw-space-2xs: 0.25rem;
  --tsw-space-xs: 0.5rem;
  --tsw-space-sm: 0.75rem;
  --tsw-space-md: 1rem;
  --tsw-space-lg: 1.5rem;
  --tsw-space-xl: 2rem;
  --tsw-space-2xl: 3rem;
  --tsw-space-3xl: 4.5rem;

  --tsw-radius-xs: 4px;
  --tsw-radius-sm: 6px;
  --tsw-radius-md: 10px;
  --tsw-radius-lg: 16px;
  --tsw-radius-xl: 24px;
  --tsw-radius-full: 999px;

  --tsw-container: 72rem;
  --tsw-container-narrow: 46rem;
  --tsw-container-wide: 88rem;
  --tsw-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --tsw-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --tsw-measure: 68ch;

  --tsw-dur-instant: 80ms;
  --tsw-dur-fast: 140ms;
  --tsw-dur-base: 240ms;
  --tsw-dur-slow: 420ms;
  --tsw-ease: cubic-bezier(0.2, 0, 0.13, 1);
  --tsw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --tsw-border-w: 1px;
  --tsw-shadow-sm: 0 1px 2px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.4));
  --tsw-shadow-md: 0 4px 16px -4px light-dark(rgb(15 23 42 / 0.1), rgb(0 0 0 / 0.55));
  --tsw-shadow-lg: 0 18px 48px -12px light-dark(rgb(15 23 42 / 0.16), rgb(0 0 0 / 0.65));

  --tsw-bg: light-dark(#ffffff, #0a0c10);
  --tsw-bg-sunken: light-dark(#f6f7f9, #06080b);
  --tsw-surface: light-dark(#ffffff, #11151c);
  --tsw-surface-2: light-dark(#f6f7f9, #171c25);
  --tsw-surface-3: light-dark(#eceff3, #1e2530);
  --tsw-overlay: light-dark(rgb(15 23 42 / 0.45), rgb(0 0 0 / 0.68));

  --tsw-text: light-dark(#111827, #eef2f7);
  --tsw-text-muted: light-dark(#4b5563, #a3b0c2);
  --tsw-text-faint: light-dark(#6b7280, #7c8aa0);
  --tsw-text-inverse: light-dark(#ffffff, #0a0c10);

  --tsw-border: light-dark(#e3e7ec, #232b38);
  --tsw-border-strong: light-dark(#cbd2db, #35405280);

  --tsw-accent-bg: light-dark(#f59e0b, #f59e0b);
  --tsw-accent-on: light-dark(#1c1305, #1c1305);
  --tsw-accent-ink: light-dark(#92400e, #fcd34d);
  --tsw-accent-soft: light-dark(#fef3c7, #3a2c0c);

  --tsw-tech-ink: light-dark(#0e7490, #67e8f9);
  --tsw-tech-soft: light-dark(#cffafe, #0b3540);

  --tsw-ok-ink: light-dark(#15803d, #86efac);
  --tsw-warn-ink: light-dark(#a16207, #fde047);
  --tsw-danger-ink: light-dark(#b91c1c, #fca5a5);

  --tsw-focus-ring: 0 0 0 2px var(--tsw-bg), 0 0 0 4px var(--tsw-accent-bg);
}

@media (prefers-contrast: more) {
  :root {
    --tsw-border: light-dark(#8a929e, #6d7c91);
    --tsw-text-muted: light-dark(#2c3440, #d3dce7);
    --tsw-border-strong: light-dark(#2c3440, #d3dce7);
  }
}