/* sRGB fallback (canonical source) */
:root {
  --white: rgb(255, 255, 255);
  --black: rgb(0, 0, 0);

  --neutral-white: rgb(245, 247, 244);
  --neutral-lightest: rgb(230, 232, 228);
  --neutral-lighter: rgb(199, 202, 197);
  --neutral-light: rgb(140, 144, 138);
  --neutral: rgb(113, 116, 110);
  --neutral-dark: rgb(86, 90, 84);
  --neutral-darker: rgb(38, 41, 37);
  --neutral-darkest: rgb(17, 19, 16);
  --neutral-black: rgb(7, 9, 7);

  --primary-light: rgb(174, 249, 123);
  --primary-dark: rgb(21, 48, 0);
  --blue-light: rgb(194, 229, 255);
  --blue-dark: rgb(0, 43, 68);
  --orange-light: rgb(248, 217, 190);
  --orange-dark: rgb(61, 31, 0);
  --pink-light: rgb(250, 211, 229);
  --pink-dark: rgb(62, 25, 45);
  --purple-light: rgb(229, 216, 252);
  --purple-dark: rgb(46, 31, 66);

  --light-0: rgba(230, 232, 228, 0);
  --light-4: rgba(230, 232, 228, 0.04);
  --light-8: rgba(230, 232, 228, 0.08);
  --light-12: rgba(230, 232, 228, 0.12);
  --light-16: rgba(230, 232, 228, 0.16);
  --light-20: rgba(230, 232, 228, 0.20);
  --light-24: rgba(230, 232, 228, 0.24);
  --light-32: rgba(230, 232, 228, 0.32);
  --light-48: rgba(230, 232, 228, 0.48);

  --dark-0: rgba(17, 19, 16, 0);
  --dark-4: rgba(17, 19, 16, 0.04);
  --dark-8: rgba(17, 19, 16, 0.08);
  --dark-12: rgba(17, 19, 16, 0.12);
  --dark-16: rgba(17, 19, 16, 0.16);
  --dark-20: rgba(17, 19, 16, 0.20);
  --dark-24: rgba(17, 19, 16, 0.24);
  --dark-32: rgba(17, 19, 16, 0.32);
  --dark-48: rgba(17, 19, 16, 0.48);

  /* spacing primitives */
  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* radius primitives */
  --radius-0: 0;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-full: 9999px;

  /* typography primitives */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-32: 32px;
  --text-36: 36px;
  --text-40: 40px;
  --text-48: 48px;
  --text-56: 56px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.4;
  --leading-relaxed: 1.43;
  --leading-150: 1.5;

  --tracking-eyebrow: 0.05rem;
  --text-transform-eyebrow: uppercase;

  /* breakpoints */
  --bp-mobile-max: 480px;
  --bp-tablet-min: 481px;
  --bp-tablet-max: 768px;
  --bp-laptop-min: 769px;
  --bp-laptop-max: 1024px;
  --bp-desktop-min: 1025px;
  --bp-desktop-max: 1200px;
  --bp-menu-change: 1024px;

  /* layout primitives */
  --site-max-width: 1360px;
  --site-padding-large: 40px;
  --site-padding-small: 25px;
  --section-padding-desktop: 50px;
  --section-padding-tablet: 40px;
  --section-padding-mobile: 30px;

  /* global focus primitives */
  --focus-ring-separator-width: 2px;
  --focus-ring-separator-color: transparent;
  --focus-ring-width: 2px;
  --focus-ring-color: var(--neutral-darkest);
  --focus-ring-offset: 2px;

  /* button focus aliases */
  --button-focus-separator-width: var(--focus-ring-separator-width);
  --button-focus-separator-color: var(--focus-ring-separator-color);
  --button-focus-ring-width: var(--focus-ring-width);
  --button-focus-ring-color: var(--focus-ring-color);
  --button-focus-ring-offset: var(--focus-ring-offset);

  /*
   * Button state backgrounds
   *
   * Each button kind exposes -bg / -bg-hover / -bg-active / -bg-disabled
   * tokens. Hover/active/disabled values are derived from the base bg via
   * color-mix() so that updating the base color automatically refreshes the
   * full state ramp.
   *
   * The legacy --button-*-overlay-* tokens are retained because non-button
   * components (header/footer hover surfaces, styleguide previews) still
   * reference them; cleaning those call sites is a follow-up.
   */

  /* filled neutral */
  --button-filled-neutral-bg: var(--neutral-darkest);
  --button-filled-neutral-bg-hover: color-mix(in srgb, var(--button-filled-neutral-bg) 92%, var(--neutral-lightest));
  --button-filled-neutral-bg-active: color-mix(in srgb, var(--button-filled-neutral-bg) 84%, var(--neutral-lightest));
  --button-filled-neutral-bg-disabled: color-mix(in srgb, var(--button-filled-neutral-bg) 68%, var(--neutral-lightest));
  --button-filled-neutral-border: transparent;
  --button-filled-neutral-text: var(--white);
  --button-filled-neutral-text-disabled: var(--neutral-lightest);
  --button-filled-neutral-overlay-hover: var(--light-8);
  --button-filled-neutral-overlay-active: var(--light-16);
  --button-filled-neutral-overlay-disabled: var(--light-32);

  /* filled primary */
  --button-filled-primary-bg: var(--primary-light);
  --button-filled-primary-bg-hover: color-mix(in srgb, var(--button-filled-primary-bg) 88%, var(--neutral-darkest));
  --button-filled-primary-bg-active: color-mix(in srgb, var(--button-filled-primary-bg) 76%, var(--neutral-darkest));
  --button-filled-primary-bg-disabled: color-mix(in srgb, var(--button-filled-primary-bg) 52%, var(--neutral-darkest));
  --button-filled-primary-border: transparent;
  --button-filled-primary-text: var(--primary-dark);
  --button-filled-primary-text-disabled: var(--neutral-dark);
  --button-filled-primary-overlay-hover: var(--dark-12);
  --button-filled-primary-overlay-active: var(--dark-24);
  --button-filled-primary-overlay-disabled: var(--dark-48);

  /* filled blue */
  --button-filled-blue-bg: var(--blue-dark);
  --button-filled-blue-bg-hover: color-mix(in srgb, var(--button-filled-blue-bg) 92%, var(--neutral-lightest));
  --button-filled-blue-bg-active: color-mix(in srgb, var(--button-filled-blue-bg) 84%, var(--neutral-lightest));
  --button-filled-blue-bg-disabled: color-mix(in srgb, var(--button-filled-blue-bg) 68%, var(--neutral-lightest));
  --button-filled-blue-border: transparent;
  --button-filled-blue-text: var(--white);
  --button-filled-blue-text-disabled: var(--neutral-lightest);
  --button-filled-blue-overlay-hover: var(--light-8);
  --button-filled-blue-overlay-active: var(--light-16);
  --button-filled-blue-overlay-disabled: var(--light-32);

  /* filled purple */
  --button-filled-purple-bg: var(--purple-dark);
  --button-filled-purple-bg-hover: color-mix(in srgb, var(--button-filled-purple-bg) 92%, var(--neutral-lightest));
  --button-filled-purple-bg-active: color-mix(in srgb, var(--button-filled-purple-bg) 84%, var(--neutral-lightest));
  --button-filled-purple-bg-disabled: color-mix(in srgb, var(--button-filled-purple-bg) 68%, var(--neutral-lightest));
  --button-filled-purple-border: transparent;
  --button-filled-purple-text: var(--white);
  --button-filled-purple-text-disabled: var(--neutral-lightest);
  --button-filled-purple-overlay-hover: var(--light-8);
  --button-filled-purple-overlay-active: var(--light-16);
  --button-filled-purple-overlay-disabled: var(--light-32);

  /* tonal neutral */
  --button-tonal-bg: var(--neutral-lightest);
  --button-tonal-bg-hover: color-mix(in srgb, var(--button-tonal-bg) 92%, var(--neutral-darkest));
  --button-tonal-bg-active: color-mix(in srgb, var(--button-tonal-bg) 84%, var(--neutral-darkest));
  --button-tonal-bg-disabled: color-mix(in srgb, var(--button-tonal-bg) 76%, var(--neutral-darkest));
  --button-tonal-border: transparent;
  --button-tonal-text: var(--neutral-darkest);
  --button-tonal-text-disabled: var(--neutral-dark);
  --button-tonal-overlay-hover: var(--dark-8);
  --button-tonal-overlay-active: var(--dark-16);
  --button-tonal-overlay-disabled: var(--dark-24);

  /* outlined neutral */
  --button-outlined-bg: transparent;
  --button-outlined-bg-hover: var(--dark-4);
  --button-outlined-bg-active: var(--dark-12);
  --button-outlined-bg-disabled: transparent;
  --button-outlined-border: var(--neutral-lighter);
  --button-outlined-border-disabled: var(--dark-8);
  --button-outlined-text: var(--neutral-darkest);
  --button-outlined-text-disabled: var(--neutral-lighter);
  --button-outlined-overlay-hover: var(--dark-4);
  --button-outlined-overlay-active: var(--dark-12);
  --button-outlined-overlay-disabled: transparent;

  /* ghost neutral */
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: var(--dark-4);
  --button-ghost-bg-active: var(--dark-12);
  --button-ghost-border: transparent;
  --button-ghost-text: var(--neutral-darkest);
  --button-ghost-text-disabled: var(--neutral-lighter);
  --button-ghost-overlay-hover: var(--dark-4);
  --button-ghost-overlay-active: var(--dark-12);

  /* nav interaction semantics (separate from buttons) */
  --nav-item-text-default: var(--neutral-dark);
  --nav-item-text-hover: var(--neutral-darkest);
  --nav-item-text-active: var(--neutral-darkest);
  --nav-item-bg-default: transparent;
  --nav-item-bg-hover: var(--dark-4);
  --nav-item-bg-active: var(--dark-12);
}

/* Target OKLCH values */
@supports (color: oklch(0 0 0)) {
  :root {
    --white: oklch(1 0 0);
    --black: oklch(0 0 0);

    --neutral-white: oklch(0.975 0.005 134);
    --neutral-lightest: oklch(0.928 0.006 134);
    --neutral-lighter: oklch(0.835 0.008 134);
    --neutral-light: oklch(0.648 0.010 134);
    --neutral: oklch(0.555 0.010 134);
    --neutral-dark: oklch(0.462 0.010 134);
    --neutral-darker: oklch(0.275 0.008 134);
    --neutral-darkest: oklch(0.182 0.006 134);
    --neutral-black: oklch(0.135 0.005 134);

    --primary-light: oklch(0.905 0.175 134);
    --primary-dark: oklch(0.275 0.095 134);
    --blue-light: oklch(0.905 0.055 240);
    --blue-dark: oklch(0.275 0.080 240);
    --orange-light: oklch(0.905 0.050 64);
    --orange-dark: oklch(0.275 0.065 64);
    --pink-light: oklch(0.905 0.050 348);
    --pink-dark: oklch(0.275 0.065 348);
    --purple-light: oklch(0.905 0.050 302);
    --purple-dark: oklch(0.275 0.065 302);

    --light-0: oklch(0.928 0.006 134 / 0);
    --light-4: oklch(0.928 0.006 134 / 0.04);
    --light-8: oklch(0.928 0.006 134 / 0.08);
    --light-12: oklch(0.928 0.006 134 / 0.12);
    --light-16: oklch(0.928 0.006 134 / 0.16);
    --light-20: oklch(0.928 0.006 134 / 0.20);
    --light-24: oklch(0.928 0.006 134 / 0.24);
    --light-32: oklch(0.928 0.006 134 / 0.32);
    --light-48: oklch(0.928 0.006 134 / 0.48);

    --dark-0: oklch(0.182 0.006 134 / 0);
    --dark-4: oklch(0.182 0.006 134 / 0.04);
    --dark-8: oklch(0.182 0.006 134 / 0.08);
    --dark-12: oklch(0.182 0.006 134 / 0.12);
    --dark-16: oklch(0.182 0.006 134 / 0.16);
    --dark-20: oklch(0.182 0.006 134 / 0.20);
    --dark-24: oklch(0.182 0.006 134 / 0.24);
    --dark-32: oklch(0.182 0.006 134 / 0.32);
    --dark-48: oklch(0.182 0.006 134 / 0.48);
  }
}