/* ==========================================================================
   Design tokens — the single source of truth for color, type, space, motion.
   Change values here to re-theme the whole site.
   ========================================================================== */

:root {
  /* Color — black / charcoal / white + a restrained metallic accent */
  --color-black: #0a0a0b;
  --color-charcoal: #17171a;
  --color-charcoal-light: #232326;
  --color-charcoal-border: #2f2f33;
  --color-white: #f5f5f3;
  --color-white-dim: rgba(245, 245, 243, 0.72);
  --color-white-faint: rgba(245, 245, 243, 0.45);

  --color-metal-100: #e7e8ea;
  --color-metal-300: #c7c9cc;
  --color-metal-500: #9a9da1;
  --color-metal-700: #6b6e72;
  --gradient-metal: linear-gradient(135deg, var(--color-metal-100), var(--color-metal-500) 55%, var(--color-metal-700));

  --color-focus: #cfd2d6;

  /* Type — fluid scale, system stack (no external font requests) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-small: 0.9375rem;
  --fs-body: clamp(1rem, 0.3vw + 0.94rem, 1.125rem);
  --fs-lead: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  --fs-h3: clamp(1.25rem, 0.8vw + 1rem, 1.625rem);
  --fs-h2: clamp(2rem, 2.6vw + 1rem, 3.25rem);
  --fs-hero: clamp(2.75rem, 5.5vw + 1rem, 5.75rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --tracking-wide: 0.14em;
  --tracking-mid: 0.04em;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 9rem;

  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Shape / elevation / motion */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --border-hair: 1px solid var(--color-charcoal-border);

  --dur-fast: 160ms;
  --dur: 320ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.6);
}