<!-- Border width tokens derived from the 8px unit. -->
<div style="width: var(--ui-space-8); height: var(--ui-row-2); border: var(--ui-border-width-sm) solid var(--ui-color-border-strong)"></div>
<div style="width: var(--ui-space-8); height: var(--ui-row-2); border: var(--ui-border-width-md) solid var(--ui-color-border-strong)"></div>
<div style="width: var(--ui-space-8); height: var(--ui-row-2); border: var(--ui-border-width-lg) solid var(--ui-color-border-strong)"></div>

<!-- Border radius tokens derived from the 8px unit. -->
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-sm)"></div>
  <small>sm (4px)</small>
</div>
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-md)"></div>
  <small>md (8px)</small>
</div>
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-lg)"></div>
  <small>lg (16px)</small>
</div>
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-row-3); height: var(--ui-row-3); background: var(--ui-color-primary); border-radius: var(--ui-radius-full)"></div>
  <small>full</small>
</div>

<!-- Elevation shadows using the primary hue for tinted depth. -->
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-space-8); height: var(--ui-row-3); background: var(--ui-color-bg); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-sm)"></div>
  <small>sm</small>
</div>
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-space-8); height: var(--ui-row-3); background: var(--ui-color-bg); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-md)"></div>
  <small>md</small>
</div>
<div class="ui-column ui-column--xs ui-items-center">
  <div style="width: var(--ui-space-8); height: var(--ui-row-3); background: var(--ui-color-bg); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-lg)"></div>
  <small>lg</small>
</div>

<!-- Duration and easing tokens. All durations drop to 0ms when prefers-reduced-motion is active. -->
:root {
  --ui-duration-instant: 50ms;
  --ui-duration-fast: 100ms;
  --ui-duration-base: 150ms;
  --ui-duration-normal: 200ms;
  --ui-duration-slow: 250ms;
  --ui-duration-slower: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-duration-instant: 0ms;
    --ui-duration-fast: 0ms;
    /* ...all set to 0ms */
  }
}
:root {
  --ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ui-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ui-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ui-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
}

<!-- Layering scale with gaps to allow insertion without renumbering. -->
:root {
  --ui-z-index-base: 0;
  --ui-z-index-sticky: 100;
  --ui-z-index-dropdown: 200;
  --ui-z-index-overlay: 300;
  --ui-z-index-modal: 400;
  --ui-z-index-popover: 500;
  --ui-z-index-tooltip: 600;
  --ui-z-index-toast: 700;
  --ui-z-index-drawer: 800;
  --ui-z-index-debug: 9999;
}

<!-- Context-aware color tokens that resolve automatically in light and dark mode via light-dark(). -->
:root {
  color-scheme: light dark;
  --ui-color-text: light-dark(var(--ui-color-neutral-900), var(--ui-color-neutral-100));
  --ui-color-text-muted: light-dark(var(--ui-color-neutral-500), var(--ui-color-neutral-400));
  --ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));
  --ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));
}
:root {
  --ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));
  --ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));
  --ui-color-interactive: var(--ui-color-primary);
  --ui-color-interactive-hover: var(--ui-color-primary-dark);
  --ui-color-focus: var(--ui-color-primary-light);
}