:root {
  --step--2: clamp(0.6944rem, 0.6855rem + 0.0445vw, 0.72rem);    
  --step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);     
  --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);         
  --step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);      
  --step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);     
  --step-3: clamp(1.728rem, 1.5648rem + 0.8162vw, 2.1973rem);    
  --step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);   
  --step-5: clamp(2.4883rem, 2.1596rem + 1.6433vw, 3.4332rem);   
  --step-6: clamp(2.986rem, 2.5319rem + 2.2705vw, 4.2915rem);    
  --step-7: clamp(3.5832rem, 2.9637rem + 3.0977vw, 5.3644rem);   
  --step-8: clamp(4.2998rem, 3.463rem + 4.184vw, 6.7056rem);     
  --font-display: var(--font-heading);
  --font-heading: ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, sans-serif;
  --font-accent: var(--font-heading);
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
  --weight-display: 700;
  --weight-heading: 650;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-display: 1.04;
  --leading-tight: 1.12;
  --leading-heading: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.6;
  --leading-loose: 1.75;

  --tracking-display: -0.022em;
  --tracking-heading: -0.012em;
  --tracking-body: 0;
  --tracking-caps: 0.07em;     
  --tracking-wide: 0.16em;     
  --measure-prose: 65ch;
  --measure-narrow: 45ch;
  --measure-wide: 80ch;
  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
  --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
  --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);
  --section-space: clamp(4rem, 2.7826rem + 6.087vw, 7.5rem);
  --gutter: clamp(1rem, 0.4783rem + 2.6087vw, 2.5rem);

  --sp-px: 1px;
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 80rem;
  --container-2xl: 90rem;
  --container-content: var(--container-lg);  
  --radius-0: 0;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 999px;

  --radius-interactive: var(--radius-md);  
  --radius-surface: var(--radius-lg);      
  --shadow-xs:
    0 1px 2px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 7%, transparent);
  --shadow-sm:
    0 1px 2px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 7%, transparent),
    0 2px 8px -2px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 9%, transparent);
  --shadow-md:
    0 1px 2px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 6%, transparent),
    0 6px 16px -4px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 10%, transparent),
    0 12px 32px -8px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 10%, transparent);
  --shadow-lg:
    0 2px 4px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 5%, transparent),
    0 12px 24px -6px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 12%, transparent),
    0 24px 56px -12px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 14%, transparent);
  --shadow-xl:
    0 4px 8px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 5%, transparent),
    0 20px 40px -8px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 16%, transparent),
    0 48px 96px -16px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 18%, transparent);
  --shadow-inner: inset 0 1px 3px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 10%, transparent);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --border-thin: 1px;
  --border-thick: 2px;
  --border-heavy: 4px;

  --opacity-disabled: 0.45;
  --opacity-muted: 0.65;
  --opacity-overlay: 0.55;     
  --opacity-tint: 0.06;        
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-drawer: 500;
  --z-modal: 600;
  --z-popover: 700;
  --z-toast: 800;
  --z-max: 999;
  --dur-1: 120ms;   
  --dur-2: 200ms;   
  --dur-3: 320ms;   
  --dur-4: 560ms;   
  --dur-5: 900ms;   

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: linear(0, 0.0047, 0.0185, 0.0414, 0.073, 0.113, 0.1611, 0.2165,
    0.2782, 0.3451, 0.4159, 0.4893, 0.5638, 0.638, 0.7104, 0.7796, 0.8443,
    0.9032, 0.9554, 1, 1.0368, 1.0656, 1.0866, 1.1002, 1.107, 1.1078, 1.1036,
    1.0952, 1.0838, 1.0703, 1.0556, 1.0407, 1.0263, 1.013, 1.0014, 0.9918,
    0.9844, 0.9793, 0.9765, 0.9759, 0.9774, 0.9806, 0.9854, 0.9913, 0.998, 1);

  --anim-distance: 24px;       
  --anim-scale-from: 0.96;
  --anim-blur-from: 6px;
  --stagger-step: 60ms;        
}

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }

html { scroll-padding-block-start: calc(var(--header-height, 5rem) + var(--sp-4)); }

img, video { max-width: 100%; height: auto; }

html {
  text-size-adjust: none;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-1);
  background-color: var(--color-bg-1);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;              
}

p, li, blockquote {
  text-wrap: pretty;               
  max-width: var(--measure-prose);
}

.hyphenate {
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

.tnum {
  font-variant-numeric: tabular-nums lining-nums;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

html[data-radius='sharp'] {
  --radius-interactive: var(--radius-0);
  --radius-surface: var(--radius-xs);
}
html[data-radius='round'] {
  --radius-interactive: var(--radius-full);
  --radius-surface: var(--radius-2xl);
}

html[data-frame='hairline'] .card { border-width: var(--border-thin); box-shadow: none; }
html[data-frame='bold'] .card { border: var(--border-thick) solid var(--color-text-1); box-shadow: none; }
html[data-frame='none'] .card { border-color: transparent; box-shadow: var(--shadow-md); background: var(--color-bg-2); }

@supports (color: oklch(from #000 l c h)) {
  html[data-brand] {
    --p-50:  oklch(from var(--brand-hex) 97.0% 0.016 h);
    --p-100: oklch(from var(--brand-hex) 94.0% 0.032 h);
    --p-200: oklch(from var(--brand-hex) 88.5% 0.064 h);
    --p-300: oklch(from var(--brand-hex) 82.0% 0.101 h);
    --p-400: oklch(from var(--brand-hex) 74.5% 0.122 h);
    --p-500: oklch(from var(--brand-hex) 66.5% 0.130 h);
    --p-600: oklch(from var(--brand-hex) 58.0% 0.130 h);
    --p-700: oklch(from var(--brand-hex) 50.0% 0.117 h);
    --p-800: oklch(from var(--brand-hex) 42.0% 0.101 h);
    --p-900: oklch(from var(--brand-hex) 34.0% 0.081 h);
    --p-950: oklch(from var(--brand-hex) 27.0% 0.065 h);
    --color-focus-ring: oklch(from var(--brand-hex) 66.5% 0.130 h);
    --gradient-brand: linear-gradient(135deg,
      oklch(from var(--brand-hex) 58.0% 0.130 h),
      oklch(from var(--brand-hex) 55.0% 0.100 calc(h + 24)));
  }
}