/* Zapp design tokens — informed by the Wiza reference build */
:root {
  /* viewport boundaries for fluid scales */
  --vp-min: 480;
  --vp-max: 1440;

  /* spacing scale — fluid via clamp */
  --space-1: clamp(.375rem, calc(.375rem + (.5 - .375) * (100vw - 480px) / (1440 - 480)), .5rem);
  --space-2: clamp(.625rem, calc(.625rem + (.75 - .625) * (100vw - 480px) / (1440 - 480)), .75rem);
  --space-3: clamp(.875rem, calc(.875rem + (1 - .875) * (100vw - 480px) / (1440 - 480)), 1rem);
  --space-4: clamp(1.25rem, calc(1.25rem + (1.5 - 1.25) * (100vw - 480px) / (1440 - 480)), 1.5rem);
  --space-5: clamp(1.75rem, calc(1.75rem + (2 - 1.75) * (100vw - 480px) / (1440 - 480)), 2rem);
  --space-6: clamp(2rem, calc(2rem + (2.5 - 2) * (100vw - 480px) / (1440 - 480)), 2.5rem);
  --space-7: clamp(2.25rem, calc(2.25rem + (3 - 2.25) * (100vw - 480px) / (1440 - 480)), 3rem);
  --space-8: clamp(2.5rem, calc(2.5rem + (4 - 2.5) * (100vw - 480px) / (1440 - 480)), 4rem);
  --space-9: clamp(3rem, calc(3rem + (6 - 3) * (100vw - 480px) / (1440 - 480)), 6rem);
  --space-10: clamp(4rem, calc(4rem + (8 - 4) * (100vw - 480px) / (1440 - 480)), 8rem);

  /* type scale — fluid via clamp */
  --fs-display: clamp(4rem, calc(4rem + 1 * (100vw - 480px) / (1440 - 480)), 5rem);
  --fs-h1: clamp(3rem, calc(3rem + 1 * (100vw - 480px) / (1440 - 480)), 4rem);
  --fs-h2: clamp(2.5rem, calc(2.5rem + 1 * (100vw - 480px) / (1440 - 480)), 3.5rem);
  --fs-h3: clamp(2.25rem, calc(2.25rem + .75 * (100vw - 480px) / (1440 - 480)), 3rem);
  --fs-h4: clamp(1.75rem, calc(1.75rem + .75 * (100vw - 480px) / (1440 - 480)), 2.5rem);
  --fs-h5: clamp(1.375rem, calc(1.375rem + .625 * (100vw - 480px) / (1440 - 480)), 2rem);
  --fs-h6: clamp(1.25rem, calc(1.25rem + .25 * (100vw - 480px) / (1440 - 480)), 1.5rem);
  --fs-xl: clamp(1.125rem, calc(1.125rem + .25 * (100vw - 480px) / (1440 - 480)), 1.375rem);
  --fs-lg: clamp(1rem, calc(1rem + .125 * (100vw - 480px) / (1440 - 480)), 1.125rem);
  --fs-md: clamp(.875rem, calc(.875rem + .125 * (100vw - 480px) / (1440 - 480)), 1rem);
  --fs-sm: clamp(.75rem, calc(.75rem + .125 * (100vw - 480px) / (1440 - 480)), .875rem);

  /* line heights */
  --lh-tight: 1;
  --lh-snug: 1.1;
  --lh-normal: 1.3;
  --lh-relaxed: 1.5;

  /* letter spacing */
  --ls-tight: -.03em;
  --ls-normal: 0em;

  /* weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* radius */
  --radius-xs: .375rem;
  --radius-sm: .5rem;
  --radius-md: .625rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --radius-huge: 2.5rem;
  --radius-section: 3.5rem;
  --radius-pill: 100vw;

  /* font families */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* color — neutrals (light scale) */
  --light-0: #ffffff;
  --light-25: #f6f8fa;
  --light-50: #eceff3;
  --light-100: #dfe1e6;
  --light-200: #c1c7cf;
  --light-300: #a4abb8;
  --light-400: #808897;
  --light-500: #666d80;
  --light-600: #353849;
  --light-700: #272835;
  --light-800: #1a1b25;
  --light-900: #0d0d12;

  /* color — neutrals (dark scale) */
  --dark-800: #2f2b2d;
  --dark-900: #1f1d1e;

  /* color — brand (placeholder palette, swap to Zapp brand color later) */
  --brand-0: #f5f0ff;
  --brand-25: #e4d8fd;
  --brand-50: #9371f0;
  --brand-100: #7e43ff;
  --brand-200: #4c24a3;
  --brand-300: #361d6d;
  --brand-500: #26114a;

  /* semantic */
  --bg: var(--light-0);
  --bg-alt: var(--light-25);
  --bg-dark: var(--brand-500);
  --text: var(--brand-500);
  --text-muted: var(--light-500);
  --text-on-dark: var(--light-0);
  --border: color-mix(in srgb, var(--brand-500) 12%, transparent);
  --border-dark: color-mix(in srgb, var(--light-0) 12%, transparent);

  /* container */
  --container-max: 1280px;
  --container-pad: var(--space-5);

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(15, 8, 35, .04), 0 1px 3px rgba(15, 8, 35, .06);
  --shadow-md: 0 4px 12px rgba(15, 8, 35, .06), 0 2px 4px rgba(15, 8, 35, .04);
  --shadow-lg: 0 12px 32px rgba(15, 8, 35, .08), 0 4px 12px rgba(15, 8, 35, .04);
  --shadow-xl: 0 24px 48px rgba(15, 8, 35, .12), 0 8px 16px rgba(15, 8, 35, .06);

  /* transition */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .2s;
  --dur-base: .35s;
  --dur-slow: .6s;
}