/* 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-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-press: 100ms;
  --duration-tooltip: 125ms;
  --duration-fast: 150ms;
  --duration-enter: 200ms;
  --duration-gallery-layout: 240ms;
  --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);
  --control-sm: 28px;
  --control-md: 32px;
  --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: 0 16px 48px rgb(0 0 0 / .24);
  --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: .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"] {
  color-scheme: dark;
  --color-surface-0: hsl(0 0% 12%);
  --color-surface-1: hsl(0 0% 15%);
  --color-surface-2: hsl(0 0% 19%);
  --color-surface-3: hsl(0 0% 23%);
  --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% 75%);
  --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"] {
  color-scheme: light;
  --color-surface-0: hsl(0 0% 98%);
  --color-surface-1: hsl(0 0% 95%);
  --color-surface-2: hsl(0 0% 92%);
  --color-surface-3: hsl(0 0% 88%);
  --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% 34%);
  --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);
}