/*
 * Totem design tokens
 * Canonical source for landing, docs, dashboard, play shell, and overlay.
 * Do not hand-copy palette values into a consumer. Import or generate from here.
 */

:root,
[data-totem-theme="dark"],
.totem-theme-dark {
  color-scheme: dark;

  --totem-color-bg: oklch(21.02% 0.006 285.9);
  --totem-color-surface: oklch(24.28% 0.0062 285.9);
  --totem-color-surface-raised: oklch(25.43% 0.0053 286);
  --totem-color-ink: oklch(94.66% 0 0);
  --totem-color-muted: oklch(71.27% 0.0128 286.1);
  --totem-color-quiet: oklch(63.2% 0.014 286.1);
  --totem-color-line: oklch(31.46% 0.0072 286);
  --totem-color-line-strong: oklch(41% 0.012 286);
  --totem-color-accent: oklch(80.45% 0.1347 209.5);
  --totem-color-accent-strong: oklch(52.5% 0.093 208.5);
  --totem-color-accent-ink: oklch(15.5% 0.0069 256.8);
  --totem-color-tool: oklch(67.07% 0.2037 304.6);
  --totem-color-tool-strong: oklch(48% 0.13 304.6);
  --totem-color-score: oklch(82.06% 0.1678 84.7);
  --totem-color-score-strong: oklch(48% 0.105 84.7);
  --totem-color-live: oklch(72.05% 0.192 149.5);
  --totem-color-live-strong: oklch(42% 0.095 149.5);
  --totem-color-error: oklch(64.42% 0.1743 23.3);
  --totem-color-focus: var(--totem-color-accent);
  --totem-color-selection: oklch(80.45% 0.1347 209.5 / 0.24);
  --totem-color-grid: oklch(80.45% 0.1347 209.5 / 0.11);
  --totem-color-scrim: oklch(8% 0.006 285.9 / 0.84);
}

[data-totem-theme="light"],
.totem-theme-light {
  color-scheme: light;

  --totem-color-bg: oklch(97.1% 0.003 286);
  --totem-color-surface: oklch(100% 0 0);
  --totem-color-surface-raised: oklch(94.7% 0.004 286);
  --totem-color-ink: oklch(21.02% 0.006 285.9);
  --totem-color-muted: oklch(43.9% 0.013 286);
  --totem-color-quiet: oklch(52.5% 0.014 286);
  --totem-color-line: oklch(87.2% 0.006 286);
  --totem-color-line-strong: oklch(71.27% 0.0128 286.1);
  --totem-color-accent: oklch(52.5% 0.093 208.5);
  --totem-color-accent-strong: oklch(44% 0.076 209.5);
  --totem-color-accent-ink: oklch(100% 0 0);
  --totem-color-tool: oklch(45.5% 0.184 304.6);
  --totem-color-tool-strong: oklch(38% 0.16 304.6);
  --totem-color-score: oklch(48% 0.105 84.7);
  --totem-color-score-strong: oklch(40% 0.09 84.7);
  --totem-color-live: oklch(48% 0.14 149.5);
  --totem-color-live-strong: oklch(40% 0.11 149.5);
  --totem-color-error: oklch(48% 0.18 23.3);
  --totem-color-focus: var(--totem-color-accent);
  --totem-color-selection: oklch(52.5% 0.093 208.5 / 0.18);
  --totem-color-grid: oklch(52.5% 0.093 208.5 / 0.09);
  --totem-color-scrim: oklch(21.02% 0.006 285.9 / 0.68);
}

:root {
  --totem-font-sans: "Helvetica Neue", "Arial Nova", "Nimbus Sans L", Arial, sans-serif;
  --totem-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --totem-text-xs: 0.75rem;
  --totem-text-sm: 0.875rem;
  --totem-text-base: 1rem;
  --totem-text-lg: 1.125rem;
  --totem-text-xl: 1.375rem;
  --totem-text-2xl: clamp(1.75rem, 4vw, 2.5rem);
  --totem-text-display: clamp(2.75rem, 9vw, 6rem);

  --totem-leading-tight: 0.94;
  --totem-leading-heading: 1.05;
  --totem-leading-body: 1.6;
  --totem-tracking-tight: -0.045em;
  --totem-tracking-mono: 0.035em;

  --totem-space-1: 0.25rem;
  --totem-space-2: 0.5rem;
  --totem-space-3: 0.75rem;
  --totem-space-4: 1rem;
  --totem-space-5: 1.5rem;
  --totem-space-6: 2rem;
  --totem-space-7: 3rem;
  --totem-space-8: 4rem;
  --totem-space-9: 6rem;

  --totem-radius-none: 0;
  --totem-radius-xs: 0.125rem;
  --totem-radius-sm: 0.25rem;
  --totem-radius-md: 0.5rem;
  --totem-radius-round: 999px;

  --totem-border: 1px solid var(--totem-color-line);
  --totem-border-strong: 1px solid var(--totem-color-line-strong);
  --totem-shadow-offset: 4px 4px 0 var(--totem-color-tool-strong);
  --totem-shadow-panel: 0 24px 80px oklch(8% 0.006 285.9 / 0.4);

  --totem-control-min: 2.75rem;
  --totem-page-max: 73.75rem;
  --totem-copy-max: 42rem;

  --totem-duration-fast: 160ms;
  --totem-duration-base: 220ms;
  --totem-duration-slow: 420ms;
  --totem-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --totem-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --totem-z-game: 0;
  --totem-z-overlay: 10;
  --totem-z-chrome: 20;
  --totem-z-sheet: 30;

  --totem-pwa-theme-color: #18181b;
  --totem-pwa-background-color: #18181b;
}

::selection {
  background: var(--totem-color-selection);
  color: var(--totem-color-ink);
}

:focus-visible {
  outline: 2px solid var(--totem-color-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --totem-duration-fast: 1ms;
    --totem-duration-base: 1ms;
    --totem-duration-slow: 1ms;
  }
}