/* Token naming adapted from: meterly/website packages/ui/styles/tokens.css.
   Grey-only adaptation; all color values have zero saturation. No Tailwind runtime.
   Shared by the app and the kit; layout files consume these values. */
:root {
  color-scheme: dark;
  --font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ui: var(--font-sans);
  --font-weight-regular: 400;
  --font-code: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: .25rem;
  --canvas-padding: calc(4 * var(--spacing));
  --radius-pill: 100px;
  --radius-card: 16px;
  --radius-sm: 8px;
  --icon-sm: 14px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --size-touch: 44px;
  --control-padding-sm: 10px;
  --control-padding-md: 12px;
  --duration-page-appear: 320ms;
  --delay-page-content: 120ms;
  --delay-gallery-loading: 400ms;
  --duration-stat-enter: 500ms;
  --delay-stat-digit: 30ms;
  --duration-press: 100ms;
  --duration-tooltip: 125ms;
  --duration-fast: 150ms;
  --duration-enter: 200ms;
  --duration-gallery-layout: 240ms;
  --duration-preview-enter: 320ms;
  --scale-preview-enter: .96;
  --distance-preview-enter: 24px;
  --distance-preview-details: 8px;
  --scale-gallery-tile: .97;
  --duration-image-reveal: 420ms;
  --delay-image-reveal: 35ms;
  --duration-search-expand: 280ms;
  --delay-search-section: 30ms;
  --scale-search-reveal: .985;
  --delay-tooltip: 500ms;
  --delay-surface-enter: 50ms;
  --delay-tooltip-dismiss: 80ms;
  --delay-video-controls: 1800ms;
  --delay-video-hover: 180ms;
  --delay-capture-link: 700ms;
  --delay-search-dismiss: 180ms;
  --size-preview-thumbnail-width: calc(40 * var(--spacing));
  --size-preview-thumbnail-height: calc(30 * var(--spacing));
  --size-search-max: 640px;
  --delay-select-typeahead: 700ms;
  --size-search-collapsed: 200px;
  --duration-spin: 900ms;
  --duration-pulse: 1600ms;
  --opacity-disabled: .5;
  --opacity-muted: .4;
  --opacity-skeleton: .45;
  --size-slider-track: 3px;
  --size-slider-thumb: 10px;
  --layer-raised: 1;
  --layer-floating: 2;
  --layer-menu: 4;
  --layer-scrim: 7;
  --layer-navigation: 8;
  --layer-skip-link: 10;
  --layer-notification: 100;
  --scale-press: .97;
  --color-scrim: rgb(0 0 0 / .85);
  --blur-modal-backdrop: 12px;
  --blur-scroll-edge: 4px;
  --control-sm: 28px;
  --control-md: 32px;
  --container-content-sm: 25rem;
  --container-content-read: 40rem;
  --container-content-md: 35rem;
  --container-content-lg: 45rem;
  --container-content-wide: 67.5rem;
  --container-content-xl: 75rem;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --shadow-md: var(--shadow-floating);
  --text-h1: 1.5rem;
  --text-h1--line-height: 1.3;
  --text-h1--letter-spacing: -0.01em;
  --text-h1--font-weight: 500;

  --text-h2: 1.125rem;
  --text-h2--line-height: 1.4;
  --text-h2--letter-spacing: 0em;
  --text-h2--font-weight: 500;

  --text-body-lg: 1rem;
  --text-body: .875rem;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: 0em;
  --text-body--font-weight: 500;

  --text-small: .75rem;
  --text-small--line-height: 1.5;
  --text-small--letter-spacing: 0em;
  --text-small--font-weight: 500;

}

:root, [data-theme="dark"] {
  --shadow-content: 0 0 0 1px rgb(255 255 255 / .025), 0 2px 8px rgb(0 0 0 / .10);
  --color-nav-hover: var(--color-surface-1);
  --color-nav-selected: var(--color-surface-2);
  --color-search-chip: var(--color-surface-3);
  --color-search-chip-hover: var(--color-surface-4);
  --color-attribute-selected: var(--color-chip);
  --color-attribute-selected-hover: var(--color-chip-hover);
  --color-attribute-selected-fg: var(--color-fg-primary);
  --color-attribute-selected-icon: var(--color-fg-secondary);
  color-scheme: dark;
  --color-header: var(--color-surface-0);
  --color-library-canvas: var(--color-surface-1);
  --color-settings-sidebar: var(--color-surface-0);
  --color-surface-raised: var(--color-surface-1);
  --color-surface-floating: hsl(0 0% 24%);
  --color-settings-content: hsl(0 0% 12%);
  --color-settings-group: hsl(0 0% 16%);
  --color-settings-control: hsl(0 0% 24%);
  --color-settings-control-hover: hsl(0 0% 29%);
  --color-menu-item-hover: hsl(0 0% 33%);
  --color-fg-unselected: hsl(0 0% 62%);
  --color-edge-floating: rgb(255 255 255 / .12);
  --shadow-edge: inset 0 0 0 1px var(--color-edge-floating);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .25), 0 4px 12px -3px rgb(0 0 0 / .22);
  --shadow-floating: 0 2px 8px -2px rgb(0 0 0 / .18), 0 10px 28px -8px rgb(0 0 0 / .18);
  --color-surface-0: hsl(0 0% 10%);
  --color-surface-1: hsl(0 0% 14%);
  --color-surface-2: hsl(0 0% 20%);
  --color-surface-3: hsl(0 0% 25%);
  --color-surface-4: hsl(0 0% 28%);
  --color-surface-5: hsl(0 0% 34%);
  --color-surface-accent: hsl(0 0% 94%);
  --color-fg-primary: hsl(0 0% 94%);
  --color-fg-secondary: hsl(0 0% 80%);
  --color-fg-tertiary: hsl(0 0% 65%);
  --color-fg-disabled: hsl(0 0% 43%);
  --color-fg-accent: hsl(0 0% 12%);
  --color-line-1: hsl(0 0% 22%);
  --color-line-2: hsl(0 0% 29%);
  --color-line-3: hsl(0 0% 40%);
  --color-chip: var(--color-surface-2);
  --color-chip-hover: var(--color-surface-3);
  --color-nav-bg: var(--color-surface-0);
  --color-nav-bg-raised: var(--color-surface-1);
}
[data-theme="light"] {
  --shadow-content: 0 0 0 1px rgb(0 0 0 / .025), 0 2px 10px rgb(0 0 0 / .035);
  --color-nav-hover: hsl(0 0% 93%);
  --color-nav-selected: var(--color-surface-3);
  --color-search-chip: var(--color-surface-2);
  --color-search-chip-hover: var(--color-surface-3);
  --color-attribute-selected: var(--color-surface-3);
  --color-attribute-selected-hover: hsl(0 0% 88%);
  --color-attribute-selected-fg: var(--color-fg-primary);
  --color-attribute-selected-icon: var(--color-fg-secondary);
  color-scheme: light;
  --color-header: hsl(0 0% 100%);
  --color-library-canvas: hsl(0 0% 96%);
  --color-settings-sidebar: hsl(0 0% 96%);
  --color-menu-item-hover: hsl(0 0% 93%);
  --color-surface-raised: hsl(0 0% 100%);
  --color-surface-floating: hsl(0 0% 100%);
  --color-settings-content: hsl(0 0% 100%);
  --color-settings-group: hsl(0 0% 97%);
  --color-settings-control: hsl(0 0% 93%);
  --color-settings-control-hover: hsl(0 0% 90%);
  --color-fg-unselected: hsl(0 0% 42%);
  --color-edge-floating: rgb(0 0 0 / .12);
  --shadow-edge: inset 0 0 0 1px var(--color-edge-floating);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .10), 0 4px 12px -3px rgb(0 0 0 / .12);
  --shadow-floating: 0 2px 5px -2px rgb(0 0 0 / .10), 0 8px 18px -6px rgb(0 0 0 / .12), 0 20px 40px -12px rgb(0 0 0 / .12);
  --color-surface-0: hsl(0 0% 98%);
  --color-surface-1: hsl(0 0% 100%);
  --color-surface-2: hsl(0 0% 95%);
  --color-surface-3: hsl(0 0% 92%);
  --color-surface-4: hsl(0 0% 83%);
  --color-surface-5: hsl(0 0% 76%);
  --color-surface-accent: hsl(0 0% 14%);
  --color-fg-primary: hsl(0 0% 14%);
  --color-fg-secondary: hsl(0 0% 30%);
  --color-fg-tertiary: hsl(0 0% 42%);
  --color-fg-disabled: hsl(0 0% 66%);
  --color-fg-accent: hsl(0 0% 98%);
  --color-line-1: hsl(0 0% 88%);
  --color-line-2: hsl(0 0% 80%);
  --color-line-3: hsl(0 0% 65%);
  --color-chip: var(--color-surface-2);
  --color-chip-hover: var(--color-surface-3);
  --color-nav-bg: var(--color-surface-0);
  --color-nav-bg-raised: var(--color-surface-1);
}

@media (max-width: 720px) {
  :root { --canvas-padding: calc(3 * var(--spacing)); }
}

/* Shared control hover follows the active theme. */
:root,[data-theme] {
  --color-control-hover: var(--color-surface-2);
}