/* DESIGN TOKENS: everything global. Type, space, controls, radii, motion, layers and shadow shapes.
   No colors: a site's colors live in design/themes/. Rules: design/DESIGN.md. Enforced by scripts/design-check.mjs. */
:root {
  /* Type */
  --font-family-sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --size-2xs: 0.6875rem;  /* 11 */
  --size-xs: 0.75rem;     /* 12 */
  --size-sm: 0.875rem;    /* 14 */
  --size-md: 1rem;        /* 16 */
  --size-lg: 1.1875rem;   /* 19 */
  --size-xl: 1.5rem;      /* 24 */
  --size-2xl: 2rem;       /* 32 */
  --size-3xl: 2.75rem;    /* 44 */
  --size-4xl: 3.75rem;    /* 60 */
  --size-5xl: 6rem;       /* 96 */
  --size-display: clamp(1.5rem, 4vw, 3rem);    /* shared-screen headlines */
  --size-banner: clamp(1.25rem, 4vw, 2.5rem);
  --size-code-xl: clamp(3rem, 10vw, 6rem);
  --size-bell: clamp(5rem, 20vw, 13.75rem);

  --weight-regular: 400;
  --weight-medium: 520;
  --weight-semibold: 620;
  --weight-bold: 760;
  --weight-black: 880;

  --stretch-normal: 100%;
  --stretch-expanded: 125%;
  --stretch-condensed: 82%;

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-caps: 0.14em;
  --tracking-code: 0.22em;

  /* Space (4px grid) */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem; /* 2 */
  --space-1: 0.25rem;    /* 4 */
  --space-2: 0.5rem;     /* 8 */
  --space-3: 0.75rem;    /* 12 */
  --space-4: 1rem;       /* 16 */
  --space-5: 1.25rem;    /* 20 */
  --space-6: 1.5rem;     /* 24 */
  --space-8: 2rem;       /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */

  /* Control sizes (touch targets) */
  --control-sm: 2.25rem;  /* 36 */
  --control-md: 2.875rem; /* 46 */
  --control-lg: 3.5rem;   /* 56 */
  --control-xl: 4.5rem;   /* 72 */

  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --border-thin: 1px;
  --border-thick: 2px;

  --content-max: 40rem;

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --dur-slower: 600ms;
  --dur-pulse: 1s;
  --dur-tape: 40s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Wordmark: "six" solid, "no" outlined; on hover the top half cracks sideways like a cut deck (DESIGN.md) */
  --size-wordmark: clamp(3rem, 21vw, 6.5rem); /* fills a phone width without overflowing at 320px */
  --tracking-wordmark: -0.05em;
  --wordmark-stroke: 0.026em;
  --wordmark-cut: 56%;              /* where the crack falls, from the top */
  --wordmark-cut-rest: 44%;         /* = 100% - --wordmark-cut */
  --wordmark-seam: 0.8%;            /* halves overlap this much so no hairline shows at rest */
  --wordmark-crack: -0.08em;        /* hover: how far the top half slides */
  --dur-crack: 240ms;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --opacity-disabled: 0.4;
  --opacity-full: 1;
  --press-scale: 0.98;

  --z-sticky: 10;
  --z-drawer: 30;
  --z-fx: 40;
  --z-sheet: 50;
  --z-toast: 60;
  --z-tip: 70;

  /* Shadow shapes are global; the colors come from the theme */
  --shadow-raised: 0 0.75rem 2.5rem var(--shadow-color);
  --glow: 0 0 0 var(--border-thin) var(--glow-edge), 0 0.5rem 2rem var(--glow-color);

  /* Typography roles */
  --font-body: var(--font-family-sans);
  --font-display: var(--font-family-sans);
}