/* ============================================================
   ui/theme-vars.css — Theme variables ONLY (no base reset)
   Extracted from ui/theme.css so docs pages can load the tokens
   without the aggressive reset (`* { margin:0; padding:0 }`,
   `a { color: inherit }`, `ul,ol { list-style: none }`) that
   would break docsify's styling.

   Load order on docs pages:
     ui/tokens.css → ui/theme-vars.css → ui/themes/*.css

   Keep in sync with the `:root` / `.dark` blocks in ui/theme.css.
   ============================================================ */

:root {
  --radius: 0.625rem;
  --background: oklch(100% 0 0deg);
  --foreground: oklch(14.5% 0 0deg);
  --card: oklch(100% 0 0deg);
  --card-foreground: oklch(14.5% 0 0deg);
  --popover: oklch(100% 0 0deg);
  --popover-foreground: oklch(14.5% 0 0deg);
  --primary: oklch(20.5% 0 0deg);
  --primary-foreground: oklch(98.5% 0 0deg);
  --secondary: oklch(97% 0 0deg);
  --secondary-foreground: oklch(20.5% 0 0deg);
  --muted: oklch(97% 0 0deg);
  --muted-foreground: oklch(55.6% 0 0deg);
  --accent: oklch(97% 0 0deg);
  --accent-foreground: oklch(20.5% 0 0deg);
  --destructive: oklch(57.7% 0.245 27.325deg);
  --border: oklch(92.2% 0 0deg);
  --input: oklch(92.2% 0 0deg);
  --ring: oklch(70.8% 0 0deg);
  --surface: oklch(98% 0 0deg);
  --surface-foreground: var(--foreground);
  --code: var(--surface);
  --code-foreground: var(--surface-foreground);
  --code-highlight: oklch(96% 0 0deg);
  --code-number: oklch(56% 0 0deg);

  /* ---- Component tokens (vega defaults) ----
     Each theme overrides these in `themes/*.css`.
     CSS custom properties cross the shadow boundary. */

  /* Button */
  --button-radius: var(--radius-md);
  --button-radius-xs: min(var(--radius-md), 8px);
  --button-radius-sm: min(var(--radius-md), 10px);
  --button-height-xs: calc(var(--spacing) * 6);
  --button-height-sm: calc(var(--spacing) * 8);
  --button-height-default: calc(var(--spacing) * 9);
  --button-height-lg: calc(var(--spacing) * 10);
  --button-size-icon: calc(var(--spacing) * 9);
  --button-size-icon-xs: calc(var(--spacing) * 6);
  --button-size-icon-sm: calc(var(--spacing) * 8);
  --button-size-icon-lg: calc(var(--spacing) * 10);
  --button-font-size-xs: var(--text-xs);
  --button-font-size-sm: var(--text-sm);
  --button-font-size-default: var(--text-sm);
  --button-font-size-lg: var(--text-sm);
  --button-padding-xs: calc(var(--spacing) * 2);
  --button-padding-sm: calc(var(--spacing) * 2.5);
  --button-padding-default: calc(var(--spacing) * 2.5);
  --button-padding-lg: calc(var(--spacing) * 2.5);
  --button-gap-xs: calc(var(--spacing) * 1);
  --button-gap-sm: calc(var(--spacing) * 1);
  --button-gap-default: calc(var(--spacing) * 1.5);
  --button-gap-lg: calc(var(--spacing) * 1.5);

  /* Badge */
  --badge-radius: var(--radius-4xl);
  --badge-font-size: var(--text-xs);

  /* Label */
  --label-gap: calc(var(--spacing) * 2);
  --label-font-size: var(--text-sm);
  --label-line-height: 1;
  --label-font-weight: var(--font-weight-medium);
  --label-text-transform: none;
  --label-letter-spacing: normal;

  /* Small text size — Lyra/Mira use text-xs (12px), others text-sm (14px).
     Used by field descriptions/errors/titles, input-group text/addons, etc. */
  --font-size-sm: var(--text-sm);

  /* Field legend (legend variant) — Lyra/Mira use text-sm, others text-base */
  --field-legend-font-size: var(--text-base);

  /* Input */
  --input-radius: var(--radius-md);
  --input-height: calc(var(--spacing) * 9);
  --input-height-xs: calc(var(--spacing) * 6);
  --input-height-sm: calc(var(--spacing) * 8);
  --input-height-default: calc(var(--spacing) * 9);
  --input-height-lg: calc(var(--spacing) * 10);
  --input-font-size: var(--font-size-sm);

  /* Textarea */
  --textarea-radius: var(--radius-md);
  --textarea-font-size: var(--font-size-sm);

  /* Skeleton */
  --skeleton-radius: var(--radius-md);

  /* Kbd */
  --kbd-radius: var(--radius-sm);
  --kbd-height: calc(var(--spacing) * 5);

  /* Switch (sizes/radius/border vary per theme — vega defaults) */
  --switch-radius: var(--radius-rounded);
  --switch-width-default: calc(var(--spacing) * 8);
  --switch-height-default: 18.4px;
  --switch-width-sm: calc(var(--spacing) * 6);
  --switch-height-sm: calc(var(--spacing) * 3.5);
  --switch-thumb-width-default: calc(var(--spacing) * 4);
  --switch-thumb-height-default: calc(var(--spacing) * 4);
  --switch-thumb-width-sm: calc(var(--spacing) * 3);
  --switch-thumb-height-sm: calc(var(--spacing) * 3);
  --switch-border-width: 1px;
  --switch-thumb-translate: calc(100% - 2px);

  /* Native Select (padding/chevron vary per theme — vega defaults) */
  --native-select-padding-x: calc(var(--spacing) * 2.5);
  --native-select-padding-right: calc(var(--spacing) * 8);
  --native-select-padding-y: calc(var(--spacing) * 1);
  --native-select-icon-right: calc(var(--spacing) * 2.5);

  /* Select (custom dropdown — sizes/radius/font/padding vary per theme,
     vega defaults). Mirrors shadcn style-*.css .cn-select-trigger. */
  --select-trigger-radius: var(--radius-md);
  --select-trigger-height-default: calc(var(--spacing) * 9);
  --select-trigger-height-sm: calc(var(--spacing) * 8);
  --select-trigger-font-size: var(--text-sm);
  --select-trigger-padding-x: calc(var(--spacing) * 2.5);
  --select-trigger-padding-y: calc(var(--spacing) * 2);
  --select-trigger-gap: calc(var(--spacing) * 1.5);
  --select-icon-size: calc(var(--spacing) * 4);

  /* Field family (gaps vary per theme — vega defaults) */
  --field-set-gap: calc(var(--spacing) * 6);
  --field-group-gap: calc(var(--spacing) * 7);
  --field-gap: calc(var(--spacing) * 3);
  --field-content-gap: calc(var(--spacing) * 1);
}

.dark {
  --background: oklch(14.5% 0 0deg);
  --foreground: oklch(98.5% 0 0deg);
  --card: oklch(20.5% 0 0deg);
  --card-foreground: oklch(98.5% 0 0deg);
  --popover: oklch(26.9% 0 0deg);
  --popover-foreground: oklch(98.5% 0 0deg);
  --primary: oklch(92.2% 0 0deg);
  --primary-foreground: oklch(20.5% 0 0deg);
  --secondary: oklch(26.9% 0 0deg);
  --secondary-foreground: oklch(98.5% 0 0deg);
  --muted: oklch(26.9% 0 0deg);
  --muted-foreground: oklch(70.8% 0 0deg);
  --accent: oklch(37.1% 0 0deg);
  --accent-foreground: oklch(98.5% 0 0deg);
  --destructive: oklch(70.4% 0.191 22.216deg);
  --border: oklch(100% 0 0deg / 10%);
  --input: oklch(100% 0 0deg / 15%);
  --ring: oklch(55.6% 0 0deg);
  --surface: oklch(20% 0 0deg);
  --surface-foreground: oklch(70.8% 0 0deg);
  --code: var(--surface);
  --code-foreground: var(--surface-foreground);
  --code-highlight: oklch(27% 0 0deg);
  --code-number: oklch(72% 0 0deg);
}