/* px on purpose: the overlay lives inside pages whose root font size it does not control. */
:root,
:host {
  --color-bg: hsl(0 0% 100%);
  --color-bg-subtle: hsl(220 16% 96%);
  --color-text: hsl(224 30% 14%);
  --color-border: hsl(220 14% 86%);
  --color-link: hsl(258 70% 50%);
  --color-accent: hsl(258 78% 56%);
  --color-on-accent: hsl(0 0% 100%);
  --color-measure: hsl(172 76% 32%);
  --color-on-measure: hsl(0 0% 100%);
  --color-danger: hsl(0 70% 46%);
  --color-question: hsl(36 92% 44%);
  --color-on-question: hsl(0 0% 100%);
  --color-success: hsl(150 58% 32%);
  --color-on-success: hsl(0 0% 100%);

  --color-pin-bg: var(--color-accent);
  --color-pin-text: var(--color-on-accent);
  --color-pin-ring: var(--color-on-accent);
  --color-pin-question-bg: var(--color-question);
  --color-pin-question-text: var(--color-on-question);
  --color-pin-open-bg: var(--color-bg);
  --color-pin-open-text: var(--color-text);
  --color-pin-open-ring: var(--color-text);

  --color-button-primary-bg: var(--color-accent);
  --color-button-primary-bg-hover: hsl(258 66% 46%);
  --color-button-primary-text: var(--color-on-accent);
  --color-button-primary-text-hover: var(--color-on-accent);
  --color-button-primary-border: var(--color-accent);
  --color-button-primary-border-hover: hsl(258 66% 46%);
  --color-button-secondary-bg: var(--color-bg);
  --color-button-secondary-bg-hover: var(--color-bg-subtle);
  --color-button-secondary-text: var(--color-text);
  --color-button-secondary-text-hover: var(--color-text);
  --color-button-secondary-border: var(--color-border);
  --color-button-secondary-border-hover: var(--color-text);
  --color-button-danger-bg: var(--color-bg);
  --color-button-danger-bg-hover: var(--color-bg-subtle);
  --color-button-danger-text: var(--color-danger);
  --color-button-danger-border: var(--color-border);
  --color-button-danger-border-hover: var(--color-danger);
  --color-button-disabled-bg: var(--color-bg-subtle);
  --color-button-disabled-text: color-mix(in hsl, var(--color-text) 45%, transparent);
  --color-button-disabled-border: var(--color-border);

  --font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-size-small: 12px;
  --font-size-main: 13px;
  --font-size-large: 15px;

  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 999px;
  --border-width: 1px;
  --focus-width: 2px;
  --shadow: 0 8px 28px color-mix(in hsl, var(--color-text) 22%, transparent);
  --duration-short: 120ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: hsl(224 20% 12%);
    --color-bg-subtle: hsl(224 16% 19%);
    --color-text: hsl(220 20% 92%);
    --color-border: hsl(224 12% 30%);
    --color-link: hsl(258 90% 78%);
    --color-accent: hsl(258 85% 70%);
    --color-on-accent: hsl(224 30% 10%);
    --color-danger: hsl(0 85% 68%);
    --color-button-primary-bg-hover: hsl(258 90% 78%);
    --color-button-primary-border-hover: hsl(258 90% 78%);
    --shadow: 0 8px 28px color-mix(in hsl, var(--color-bg) 60%, transparent);
  }
}