@layer refine.tokens {
  :root {
    /* ========================================
       Spacing Scale
       Based on 0.25rem (4px) increments
       ======================================== */
    --size-0: 0;
    --size-px: 1px;
    --size-0-5: 0.125rem; /* 2px */
    --size-1: 0.25rem; /* 4px */
    --size-1-5: 0.375rem; /* 6px */
    --size-2: 0.5rem; /* 8px */
    --size-2-5: 0.625rem; /* 10px */
    --size-3: 0.75rem; /* 12px */
    --size-3-5: 0.875rem; /* 14px */
    --size-4: 1rem; /* 16px */
    --size-5: 1.25rem; /* 20px */
    --size-6: 1.5rem; /* 24px */
    --size-7: 1.75rem; /* 28px */
    --size-8: 2rem; /* 32px */
    --size-9: 2.25rem; /* 36px */
    --size-10: 2.5rem; /* 40px */
    --size-11: 2.75rem; /* 44px */
    --size-12: 3rem; /* 48px */
    --size-14: 3.5rem; /* 56px */
    --size-16: 4rem; /* 64px */
    --size-20: 5rem; /* 80px */
    --size-24: 6rem; /* 96px */
    --size-28: 7rem; /* 112px */
    --size-32: 8rem; /* 128px */
    --size-36: 9rem; /* 144px */
    --size-40: 10rem; /* 160px */
    --size-44: 11rem; /* 176px */
    --size-48: 12rem; /* 192px */
    --size-52: 13rem; /* 208px */
    --size-56: 14rem; /* 224px */
    --size-60: 15rem; /* 240px */
    --size-64: 16rem; /* 256px */
    --size-72: 18rem; /* 288px */
    --size-80: 20rem; /* 320px */
    --size-96: 24rem; /* 384px */

    /* Section Spacing */
    --section-spacing: 2rem; /* 32px */

    /* Container Sizes */
    --size-2xs: 16rem; /* 256px */
    --size-xs: 20rem; /* 320px */
    --size-sm: 24rem; /* 384px */
    --size-md: 28rem; /* 448px */
    --size-lg: 32rem; /* 512px */
    --size-xl: 36rem; /* 576px */
    --size-2xl: 42rem; /* 672px */
    --size-3xl: 48rem; /* 768px */
    --size-4xl: 56rem; /* 896px */
    --size-5xl: 64rem; /* 1024px */
    --size-6xl: 72rem; /* 1152px */
    --size-7xl: 80rem; /* 1280px */

    /* Special Sizes */
    --size-full: 100%;
    --size-fit: fit-content;
    --size-min: min-content;
    --size-max: max-content;
    --size-auto: auto;
    --size-none: none;
    --size-prose: 65ch; /* Optimal reading width */

    /* Viewport Units */
    --size-screen-width: 100dvw;
    --size-screen-height: 100dvh;

    /* Breakpoints */
    --size-screen-xs: 480px;
    --size-screen-sm: 640px;
    --size-screen-md: 768px;
    --size-screen-lg: 1024px;
    --size-screen-xl: 1280px;
    --size-screen-2xl: 1536px;

    /* ========================================
       3D Perspective (for transforms)
       ======================================== */
    --perspective-dramatic: 100px;
    --perspective-near: 300px;
    --perspective-normal: 500px;
    --perspective-midrange: 800px;
    --perspective-distant: 1200px;

    /* ========================================
       Aspect Ratios
       ======================================== */
    --aspect-square: 1 / 1;
    --aspect-video: 16 / 9;
    --aspect-wide: 21 / 9;
    --aspect-ultrawide: 32 / 9;
    --aspect-portrait: 3 / 4;
    --aspect-photo: 4 / 3;

    /* ========================================
       Grid Template Columns
       ======================================== */
    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-5: repeat(5, minmax(0, 1fr));
    --grid-6: repeat(6, minmax(0, 1fr));
    --grid-7: repeat(7, minmax(0, 1fr));
    --grid-8: repeat(8, minmax(0, 1fr));
    --grid-9: repeat(9, minmax(0, 1fr));
    --grid-10: repeat(10, minmax(0, 1fr));
    --grid-11: repeat(11, minmax(0, 1fr));
    --grid-12: repeat(12, minmax(0, 1fr));

    /* ========================================
       Z-Index Scale
       A page only has one stacking context to reason about — every layer
       (sticky headers, dropdowns, overlays, modals, popovers, tooltips,
       toasts) needs one shared, monotonic scale, not ad-hoc literals
       scattered across components and page code alike.
       ======================================== */
    --z-base: 0;
    --z-sticky: 40;
    --z-dropdown: 100;
    --z-fixed: 300;
    --z-overlay: 500;
    --z-modal: 600;
    --z-popover: 1000;
    --z-tooltip: 1100;
    --z-toast: 9999;

    /* ========================================
       Border Widths
       ======================================== */
    --border-0: 0;
    --border: 1px;
    --border-2: 2px;
    --border-4: 4px;
    --border-8: 8px;

    /* Ring Utilities (for focus states) */
    --ring-0: 0 0 0 0;
    --ring: 0 0 0 var(--border);
    --ring-2: 0 0 0 var(--border-2);
    --ring-4: 0 0 0 var(--border-4);
    --ring-8: 0 0 0 var(--border-8);

    /* ========================================
       Border Radius
       Optimized for accessibility - minimum 4px for touch targets
       ======================================== */
    --rounded-none: 0;
    --rounded-xs: 0.125rem; /* 2px - minimal */
    --rounded-sm: 0.25rem; /* 4px - small */
    --rounded: 0.25rem; /* 4px - default */
    --rounded-md: 0.375rem; /* 6px - medium */
    --rounded-lg: 0.5rem; /* 8px - large */
    --rounded-xl: 0.75rem; /* 12px - extra large */
    --rounded-2xl: 1rem; /* 16px - 2x extra large */
    --rounded-3xl: 1.5rem; /* 24px - 3x extra large */
    --rounded-full: 9999px; /* Full circle/pill */

    /* ========================================
       Blur Effects
       ======================================== */
    --blur-none: 0;
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;

    /* ========================================
       Box Shadows
       All shadows use light-dark() to remain visible in dark mode.
       ======================================== */
    --shadow-none: 0 0 transparent;

    /* light-dark() only accepts <color> arguments (spec: CSS Color 5) — these used
       to wrap the *entire* shadow (offset + blur + color), which is invalid CSS.
       Custom properties store any token soup, so the declaration itself never
       errored, but every consumer substituting it into an actual `box-shadow`
       got an unparseable value and silently computed to `none` in spec-compliant
       browsers. Fixed by keeping offset/blur outside and wrapping only the color
       — offset/blur are identical between light and dark here anyway, only the
       alpha differs. */
    --shadow-2xs: 0 1px 2px light-dark(rgb(0 0 0 / 3%), rgb(0 0 0 / 20%));
    --shadow-xs: 0 2px 4px light-dark(rgb(0 0 0 / 3%), rgb(0 0 0 / 22%));
    --shadow-sm: 0 4px 10px -1px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 28%));
    --shadow: 0 8px 16px -2px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 32%));
    --shadow-md: 0 12px 24px -4px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 34%));
    --shadow-lg: 0 24px 32px -8px light-dark(rgb(0 0 0 / 8%), rgb(0 0 0 / 38%));
    --shadow-xl: 0 32px 64px -16px light-dark(rgb(0 0 0 / 12%), rgb(0 0 0 / 44%));
    --shadow-2xl: 0 48px 80px -20px light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 52%));

    /* Inset Shadows — same light-dark()-color-only fix as above. */
    --inset-shadow-none: inset 0 0 transparent;
    --inset-shadow-2xs: inset 0 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 4%));
    --inset-shadow-xs: inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 4%));
    --inset-shadow-sm: inset 0 2px 4px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 25%));
    --inset-shadow: inset 0 2px 4px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 28%));

    /* Drop Shadows (for filters) */
    --drop-shadow-none: 0 0 transparent;
    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 5%);
    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 15%);
    --drop-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 1px 1px rgb(0 0 0 / 6%);
    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 12%);
    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 15%);
    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 10%);
    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 15%);

    /* Text Shadows (for readability) */
    --text-shadow-none: 0 0 transparent;
    --text-shadow-2xs: 0 1px 0 rgb(0 0 0 / 15%);
    --text-shadow-xs: 0 1px 1px rgb(0 0 0 / 20%);
    --text-shadow-sm: 0 1px 0 rgb(0 0 0 / 7.5%), 0 1px 1px rgb(0 0 0 / 7.5%), 0 2px 2px rgb(0 0 0 / 7.5%);
    --text-shadow: 0 1px 1px rgb(0 0 0 / 10%), 0 2px 2px rgb(0 0 0 / 10%);
    --text-shadow-md: 0 1px 1px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 10%), 0 2px 4px rgb(0 0 0 / 10%);
    --text-shadow-lg: 0 1px 2px rgb(0 0 0 / 10%), 0 3px 2px rgb(0 0 0 / 10%), 0 4px 8px rgb(0 0 0 / 10%);

    /* ========================================
       Typography
       Optimized for WCAG AAA readability
       ======================================== */

    /* Font Family */
    --font-sans:
      'Inter Variable', 'Plus Jakarta Sans Variable', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
      sans-serif;
    --font-serif: ui-serif, georgia, cambria, 'Times New Roman', times, serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', menlo, consolas, 'Liberation Mono', monospace;

    /* Font Weights (Accessibility: minimum 400 for body text) */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400; /* Minimum for body text */
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em; /* -2.5% — headers, display text */
    --tracking-header: var(--tracking-tighter);
    --tracking-normal: 0em; /* default body tracking */
    --tracking-wide: 0.05em; /* labels, badges, uppercase caps */

    /* Line Heights (Optimized for readability - WCAG recommends 1.5 for body text) */
    --leading-none: 1;
    --leading-tight: 1.15; /* 115% for headers */
    --leading-snug: 1.375;
    --leading-normal: 1.5; /* Optimal for body text (WCAG) */
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Absolute Line Heights */
    --leading-3: 0.75rem; /* 12px */
    --leading-4: 1rem; /* 16px */
    --leading-5: 1.25rem; /* 20px */
    --leading-6: 1.5rem; /* 24px */
    --leading-7: 1.75rem; /* 28px */
    --leading-8: 2rem; /* 32px */
    --leading-9: 2.25rem; /* 36px */
    --leading-10: 2.5rem; /* 40px */

    /* Component UI Font Sizes (7 steps — used inside components) */
    --text-2xs: 0.625rem; /* 10px - micro labels, dot-only badges */
    --text-xs: 0.75rem; /* 12px - small labels only */
    --text-sm: 0.875rem; /* 14px - secondary text */
    --text-base: 1rem; /* 16px - body text (minimum) */
    --text-lg: 1.125rem; /* 18px - large UI / headings */
    --text-xl: 1.25rem; /* 20px - subheadings */
    --text-2xl: 1.5rem; /* 24px - major headings */
    --text-3xl: 1.875rem; /* 30px - display / circular progress label */

    /* Document Heading Sizes (h1–h6 — use outside components, in page/doc context) */
    --heading-xs: 0.875rem;
    --heading-sm: 1rem;
    --heading-md: 1.5rem;
    --heading-lg: 2rem;
    --heading-xl: 3rem;
    --heading-2xl: 4rem;

    /* Semantic Text Colors (for accessibility)
       These adapt to light/dark mode automatically */
    --text-color-heading: var(--color-contrast-900);
    --text-color-body: var(--color-contrast-800);
    --text-color-secondary: var(--color-contrast-600);
    --text-color-tertiary: var(--color-contrast-500);
    --text-color-disabled: var(--color-contrast-400);
    --text-color-contrast: var(--color-contrast-100);

    /* ========================================
       Transitions & Animations
       Optimized for smooth, accessible motion
       ======================================== */

    /* Easing Functions */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* Fast start, soft landing — no overshoot */
    --ease-move: cubic-bezier(0.25, 1, 0.5, 1); /* Spatial slides — drawers, panels, carousels */
    --ease-overshoot: cubic-bezier(0.34, 1.1, 0.64, 1); /* Subtle spring overshoot — toasts, popups */

    /* Duration (respects prefers-reduced-motion) */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-600: 600ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
    --duration-1400: 1400ms; /* Looping indicator cycle */
    --duration-1500: 1500ms; /* Looping indicator cycle */

    /* Combined Transitions (most commonly used) */
    --transition-none: none;
    --transition-fast: 150ms var(--ease-in-out);
    --transition-normal: 200ms var(--ease-in-out);
    --transition-slow: 300ms var(--ease-in-out);
    --transition-slower: 500ms var(--ease-in-out);
    --transition-spring: 300ms var(--ease-spring);
    --transition-exit: 300ms var(--ease-out); /* Exit animations — overlay dismiss, alert collapse */
    --transition-loader: 600ms linear; /* Spinner — constant rotation */

    /* Overlay entrance defaults — shared by @starting-style blocks */
    --overlay-enter-translate-y: -4px; /* dropdown slides down from */
    --overlay-enter-translate-y-up: 4px; /* bottom-anchored overlays slide up from */
    --overlay-enter-scale: 0.97; /* slight scale-in for menus / panels */
    --overlay-enter-scale-dialog: 0.96; /* slightly more pronounced for dialogs */

    /* ── theme-tokens:generated:begin — run `pnpm run sync:theme`, do not hand-edit ── */
    /* ── Contrast scale — Neutral OKLCH with a lifted, non-pure-black Dark Mode baseline ── */
    --color-contrast-50: light-dark(oklch(99% 0.001 264deg), oklch(17% 0.001 250deg)); /* Canvas, page background */
    --color-contrast-100: light-dark(oklch(97% 0.001 264deg), oklch(21% 0.001 250deg)); /* Cards, elevated surfaces */
    --color-contrast-150: light-dark(
      oklch(95.5% 0.001 264deg),
      oklch(23.5% 0.001 250deg)
    ); /* Midpoint — chip base, subtle fills */
    --color-contrast-200: light-dark(oklch(94% 0.001 264deg), oklch(26% 0.001 250deg)); /* Nested cards, hover states */
    --color-contrast-300: light-dark(oklch(89% 0.002 264deg), oklch(32% 0.001 250deg)); /* Borders, dividers */
    --color-contrast-400: light-dark(
      oklch(81% 0.002 264deg),
      oklch(40% 0.001 250deg)
    ); /* Disabled backgrounds, subtle UI */
    --color-contrast-500: light-dark(
      oklch(49% 0.002 264deg),
      oklch(58% 0.001 250deg)
    ); /* Tertiary text - AA large-text compliant */
    --color-contrast-600: light-dark(
      oklch(40% 0.002 264deg),
      oklch(68% 0.001 250deg)
    ); /* Secondary text - AA compliant */
    --color-contrast-700: light-dark(oklch(32% 0.002 264deg), oklch(78% 0.001 250deg)); /* Body text - AAA compliant */
    --color-contrast-800: light-dark(oklch(22% 0.002 264deg), oklch(88% 0.001 250deg)); /* Headings - AAA compliant */
    --color-contrast-900: light-dark(
      oklch(12% 0.002 264deg),
      oklch(95% 0.001 250deg)
    ); /* High contrast text - AAA compliant */

    --color-canvas: color-mix(in oklch, var(--color-contrast-50) 85%, transparent);
    --color-divider: color-mix(in oklch, var(--color-contrast-300) 85%, transparent);
    --color-contrast: color-mix(in oklch, var(--color-contrast-900) 85%, transparent);

    /* ── Shade ramp — shared derivation recipe for every color family below ──── */
    /* Every family only authors a `base` (+ content/contrast ink pair); every  */
    /* other sub-token is `oklch(from var(--color-x) ...)`, derived from that   */
    /* single base using the deltas below. Tune a family by editing its base;   */
    /* tune the ramp shape itself (e.g. how much lighter "-lighter" is) here,    */
    /* once, for all 7 families at once. */
    --shade-lighter-l: 0.3;
    --shade-lighter-c: 0.35;
    --shade-light-l: 0.14;
    --shade-light-c: 0.8;
    --shade-dark-l: -0.14;
    --shade-darker-l: -0.26;
    --shade-darker-c: 0.85;
    --shade-darker-h: -12;
    --shade-focus-l: 0.06;
    --shade-border-alpha: 60%;
    --shade-focus-ring-strength: 40%;
    --shade-backdrop-l-light: 93%;
    --shade-backdrop-l-dark: 24%;
    --shade-backdrop-c-light: 0.3;
    --shade-backdrop-c-dark: 0.5;
    --shade-backdrop-alpha-light: 83%;
    --shade-backdrop-alpha-dark: 50%;
    --shade-halo-glow: 15%;
    --shade-halo-glow-soft: 8%;

    /* ── Halo shadows — branded glow per color family ───────────────────────── */
    --halo-shadow-neutral:
      inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 15%)),
      0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(0 0 0 / 20%)) inset,
      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-neutral) var(--shade-halo-glow), transparent),
      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-neutral) var(--shade-halo-glow-soft), transparent);
    --halo-shadow-primary:
      inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
      0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-primary) var(--shade-halo-glow), transparent),
      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-primary) var(--shade-halo-glow-soft), transparent);
    --halo-shadow-secondary:
      inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
      0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-secondary) var(--shade-halo-glow), transparent),
      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-secondary) var(--shade-halo-glow-soft), transparent);
    --halo-shadow-info:
      inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
      0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-info) var(--shade-halo-glow), transparent),
      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-info) var(--shade-halo-glow-soft), transparent);
    --halo-shadow-success:
      inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
      0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-success) var(--shade-halo-glow), transparent),
      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-success) var(--shade-halo-glow-soft), transparent);
    --halo-shadow-warning:
      inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
      0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-warning) var(--shade-halo-glow), transparent),
      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-warning) var(--shade-halo-glow-soft), transparent);
    --halo-shadow-error:
      inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
      0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-error) var(--shade-halo-glow), transparent),
      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-error) var(--shade-halo-glow-soft), transparent);

    /* ── Neutral — True gray — neutral UI surfaces ── */
    --color-neutral: light-dark(oklch(52% 0 264deg), oklch(72% 0 250deg));
    --color-neutral-backdrop: light-dark(
      oklch(
        from var(--color-neutral) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
        var(--shade-backdrop-alpha-light)
      ),
      oklch(
        from var(--color-neutral) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
        var(--shade-backdrop-alpha-dark)
      )
    );
    --color-neutral-content: light-dark(
      oklch(from var(--color-neutral) 99% calc(c * 0) h),
      oklch(from var(--color-neutral) 22% calc(c * 0) h)
    );
    --color-neutral-contrast: light-dark(
      oklch(from var(--color-neutral) 99% calc(c * 0) h),
      oklch(from var(--color-neutral) 13% calc(c * 0) h)
    );
    --color-neutral-lighter: oklch(
      from var(--color-neutral) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
    );
    --color-neutral-light: oklch(
      from var(--color-neutral) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
    );
    --color-neutral-dark: oklch(from var(--color-neutral) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
    --color-neutral-darker: oklch(
      from var(--color-neutral) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
        calc(h + var(--shade-darker-h))
    );
    --color-neutral-focus: oklch(from var(--color-neutral) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
    --color-neutral-border: oklch(from var(--color-neutral) l c h / var(--shade-border-alpha));
    --color-neutral-focus-shadow:
      0 0 0 4px color-mix(in oklch, var(--color-neutral) var(--shade-focus-ring-strength), transparent),
      var(--shadow-sm);

    /* ── Primary — Periwinkle violet — primary brand color ── */
    --color-primary-hue: 293deg;

    --color-primary: light-dark(oklch(56% 0.22 var(--color-primary-hue)), oklch(72% 0.148 var(--color-primary-hue)));
    --color-primary-backdrop: light-dark(
      oklch(
        from var(--color-primary) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
        var(--shade-backdrop-alpha-light)
      ),
      oklch(
        from var(--color-primary) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
        var(--shade-backdrop-alpha-dark)
      )
    );
    --color-primary-content: light-dark(
      oklch(from var(--color-primary) 97% calc(c * 0.05) h),
      oklch(from var(--color-primary) 22% calc(c * 0.3) h)
    );
    --color-primary-contrast: light-dark(
      oklch(from var(--color-primary) 98% calc(c * 0.045) h),
      oklch(from var(--color-primary) 14% calc(c * 0.3) h)
    );
    --color-primary-lighter: oklch(
      from var(--color-primary) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
    );
    --color-primary-light: oklch(
      from var(--color-primary) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
    );
    --color-primary-dark: oklch(from var(--color-primary) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
    --color-primary-darker: oklch(
      from var(--color-primary) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
        calc(h + var(--shade-darker-h))
    );
    --color-primary-focus: oklch(from var(--color-primary) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
    --color-primary-border: oklch(from var(--color-primary) l c h / var(--shade-border-alpha));
    --color-primary-focus-shadow:
      0 0 0 4px color-mix(in oklch, var(--color-primary) var(--shade-focus-ring-strength), transparent),
      var(--shadow-sm);

    /* ── Secondary — Ink/charcoal (light) · silver (dark) — auto-derived from --color-primary-hue ── */
    --color-secondary: light-dark(
      color-mix(in oklch, oklch(20% 0 none) 86%, var(--color-primary)),
      color-mix(in oklch, oklch(83% 0 none) 86%, var(--color-primary))
    );
    --color-secondary-backdrop: light-dark(
      oklch(
        from var(--color-secondary) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
        var(--shade-backdrop-alpha-light)
      ),
      oklch(
        from var(--color-secondary) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
        var(--shade-backdrop-alpha-dark)
      )
    );
    --color-secondary-content: light-dark(
      oklch(from var(--color-secondary) 97% 0.0015 h),
      oklch(from var(--color-secondary) 22% 0.002 h)
    );
    --color-secondary-contrast: light-dark(
      oklch(from var(--color-secondary) 98% 0.002 h),
      oklch(from var(--color-secondary) 13% 0.003 h)
    );
    --color-secondary-lighter: oklch(
      from var(--color-secondary) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
    );
    --color-secondary-light: oklch(
      from var(--color-secondary) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
    );
    --color-secondary-dark: oklch(from var(--color-secondary) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
    --color-secondary-darker: oklch(
      from var(--color-secondary) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
        calc(h + var(--shade-darker-h))
    );
    --color-secondary-focus: oklch(from var(--color-secondary) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
    --color-secondary-border: oklch(from var(--color-secondary) l c h / var(--shade-border-alpha));
    --color-secondary-focus-shadow:
      0 0 0 4px color-mix(in oklch, var(--color-secondary) var(--shade-focus-ring-strength), transparent),
      var(--shadow-sm);

    /* ── Info — Blue (light mode) · cyan-blue (dark mode) — informational messages ── */
    --color-info: light-dark(oklch(54% 0.169 255deg), oklch(74% 0.133 230deg));
    --color-info-backdrop: light-dark(
      oklch(
        from var(--color-info) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
        var(--shade-backdrop-alpha-light)
      ),
      oklch(
        from var(--color-info) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
        var(--shade-backdrop-alpha-dark)
      )
    );
    --color-info-content: light-dark(
      oklch(from var(--color-info) 97% 0.0122 h),
      oklch(from var(--color-info) 15% 0.024 h)
    );
    --color-info-contrast: light-dark(
      oklch(from var(--color-info) 98% 0.0081 h),
      oklch(from var(--color-info) 12% 0.019 h)
    );
    --color-info-lighter: oklch(
      from var(--color-info) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
    );
    --color-info-light: oklch(
      from var(--color-info) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
    );
    --color-info-dark: oklch(from var(--color-info) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
    --color-info-darker: oklch(
      from var(--color-info) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
        calc(h + var(--shade-darker-h))
    );
    --color-info-focus: oklch(from var(--color-info) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
    --color-info-border: oklch(from var(--color-info) l c h / var(--shade-border-alpha));
    --color-info-focus-shadow:
      0 0 0 4px color-mix(in oklch, var(--color-info) var(--shade-focus-ring-strength), transparent), var(--shadow-sm);

    /* ── Success — Green (light mode) · teal (dark mode) — positive outcomes & confirmations ── */
    --color-success: light-dark(oklch(53% 0.145 137deg), oklch(78% 0.14 160deg));
    --color-success-backdrop: light-dark(
      oklch(
        from var(--color-success) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
        var(--shade-backdrop-alpha-light)
      ),
      oklch(
        from var(--color-success) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
        var(--shade-backdrop-alpha-dark)
      )
    );
    --color-success-content: light-dark(
      oklch(from var(--color-success) 97% 0.0494 h),
      oklch(from var(--color-success) 15% 0.027 h)
    );
    --color-success-contrast: light-dark(
      oklch(from var(--color-success) 98% 0.0323 h),
      oklch(from var(--color-success) 12% 0.022 h)
    );
    --color-success-lighter: oklch(
      from var(--color-success) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
    );
    --color-success-light: oklch(
      from var(--color-success) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
    );
    --color-success-dark: oklch(from var(--color-success) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
    --color-success-darker: oklch(
      from var(--color-success) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
        calc(h + var(--shade-darker-h))
    );
    --color-success-focus: oklch(from var(--color-success) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
    --color-success-border: oklch(from var(--color-success) l c h / var(--shade-border-alpha));
    --color-success-focus-shadow:
      0 0 0 4px color-mix(in oklch, var(--color-success) var(--shade-focus-ring-strength), transparent),
      var(--shadow-sm);

    /* ── Warning — Amber — cautionary states & alerts ── */
    --color-warning: light-dark(oklch(54% 0.111 70deg), oklch(84% 0.113 70deg));
    --color-warning-backdrop: light-dark(
      oklch(
        from var(--color-warning) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
        var(--shade-backdrop-alpha-light)
      ),
      oklch(
        from var(--color-warning) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
        var(--shade-backdrop-alpha-dark)
      )
    );
    --color-warning-content: light-dark(
      oklch(from var(--color-warning) 97% 0.0184 h),
      oklch(from var(--color-warning) 15% 0.026 h)
    );
    --color-warning-contrast: light-dark(
      oklch(from var(--color-warning) 98% 0.0122 h),
      oklch(from var(--color-warning) 12% 0.021 h)
    );
    --color-warning-lighter: oklch(
      from var(--color-warning) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
    );
    --color-warning-light: oklch(
      from var(--color-warning) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
    );
    --color-warning-dark: oklch(from var(--color-warning) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
    --color-warning-darker: oklch(
      from var(--color-warning) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
        calc(h + var(--shade-darker-h))
    );
    --color-warning-focus: oklch(from var(--color-warning) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
    --color-warning-border: oklch(from var(--color-warning) l c h / var(--shade-border-alpha));
    --color-warning-focus-shadow:
      0 0 0 4px color-mix(in oklch, var(--color-warning) var(--shade-focus-ring-strength), transparent),
      var(--shadow-sm);

    /* ── Error — Vermilion — destructive actions & errors ── */
    --color-error: light-dark(oklch(54% 0.2 29deg), oklch(66% 0.18 29deg));
    --color-error-backdrop: light-dark(
      oklch(
        from var(--color-error) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
        var(--shade-backdrop-alpha-light)
      ),
      oklch(
        from var(--color-error) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
        var(--shade-backdrop-alpha-dark)
      )
    );
    --color-error-content: light-dark(
      oklch(from var(--color-error) 97% 0.0125 h),
      oklch(from var(--color-error) 22% 0.077 h)
    );
    --color-error-contrast: light-dark(
      oklch(from var(--color-error) 98% 0.0088 h),
      oklch(from var(--color-error) 14% 0.052 h)
    );
    --color-error-lighter: oklch(
      from var(--color-error) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
    );
    --color-error-light: oklch(
      from var(--color-error) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
    );
    --color-error-dark: oklch(from var(--color-error) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
    --color-error-darker: oklch(
      from var(--color-error) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
        calc(h + var(--shade-darker-h))
    );
    --color-error-focus: oklch(from var(--color-error) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
    --color-error-border: oklch(from var(--color-error) l c h / var(--shade-border-alpha));
    --color-error-focus-shadow:
      0 0 0 4px color-mix(in oklch, var(--color-error) var(--shade-focus-ring-strength), transparent), var(--shadow-sm);
    /* ── theme-tokens:generated:end ── */
  }

  /* ========================================
     Reduced Motion
     ======================================== */

  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-75: 0ms;
      --duration-100: 0ms;
      --duration-150: 0ms;
      --duration-200: 0ms;
      --duration-300: 0ms;
      --duration-500: 0ms;
      --duration-700: 0ms;
      --duration-1000: 0ms;
      --transition-fast: none;
      --transition-normal: none;
      --transition-slow: none;
      --transition-slower: none;
      --transition-spring: none;
      --transition-exit: none;
      --transition-loader: none;
    }
  }

  /* Refine's dark-mode contract: toggle `classList.add/remove('dark')` on   */

  /* `<html>`, nothing else. Forcing `color-scheme` here (rather than only    */

  /* relying on `prefers-color-scheme`) is what makes every `light-dark()`   */

  /* token in this file resolve to the right branch once `.dark` is present, */

  /* overriding the OS preference. See docs/refine/theming.md "Toggle dark   */

  /* mode" — any consumer, not just this repo's own docs site, can rely on   */

  /* this class toggle. */
  html.dark {
    color-scheme: dark;
  }

  html:not(.dark) {
    color-scheme: light;
  }
}