/* Approved chat direction. Change shared design decisions here, not in component overrides.
   Each color is a surface/content role, with light and dark values together.
   The theme control changes color-scheme; system follows the browser preference. */
:root {
  color-scheme: light dark;

  /* Surfaces and their foregrounds */
  --keli-canvas: light-dark(#eeefeb, #141615);
  --keli-surface: light-dark(#ffffff, #202122);
  --keli-surface-subtle: light-dark(#ecece8, #303231);
  --keli-text: light-dark(#1d201d, #f4f4f3);
  --keli-text-secondary: light-dark(#474c47, #bcbcbc);
  --keli-border: light-dark(#d9d9d6, #494a49);
  --keli-control-border: light-dark(#727872, #899089);
  --keli-chrome: #222222;
  --keli-chrome-overlay: rgb(22 26 28 / 88%);
  --keli-brand-label: rgb(22 26 28 / 65%);
  --keli-wallpaper-shade: light-dark(transparent, rgb(0 0 0 / 25%));
  --keli-on-chrome: #f8f8f6;
  --keli-on-chrome-secondary: #bcbcbc;
  --keli-chrome-border: #787878;
  --keli-pill-surface: #151515;
  --keli-pill-border: #3b3b3b;
  --keli-pill-hover: #2b2b2b;
  --keli-selection: #f2f2ef;
  --keli-on-selection: #222222;
  --keli-tab-surface: rgb(22 26 28 / 72%);
  --keli-tab-text-shadow: rgb(0 0 0 / 85%);
  --keli-tab-hover-shadow: rgb(0 0 0 / 55%);
  --keli-mode-light: #000000;
  --keli-mode-dark: #ffffff;
  --keli-action: light-dark(#005c63, #8dddde);
  --keli-focus: light-dark(#00666d, #74dbde);
  --keli-error: light-dark(#8b2336, #ffb3bf);
  --keli-error-surface: light-dark(#fff1f3, #351f28);
  --keli-error-border: light-dark(#b64a5c, #d98193);

  /* Typography: sans-serif UI; navigation pills and source JSON use monospace. */
  --keli-font-body: Arial, Helvetica, system-ui, sans-serif;
  --keli-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --keli-text-body: 1rem;
  --keli-text-summary: 1.0625rem;
  --keli-text-source: 0.875rem;
  --keli-text-metadata: 0.8125rem;
  --keli-text-heading: 2rem;
  --keli-text-count: 3.75rem;
  --keli-text-wordmark: 1.25rem;
  --keli-text-environment: 0.6875rem;
  --keli-leading-body: 1.55;
  --keli-leading-summary: 1.65;
  --keli-leading-source: 1.7;
  --keli-measure: 62ch;
  --keli-source-measure: 68ch;

  /* Shared rhythm and scalable geometry */
  --keli-space-1: 0.25rem;
  --keli-space-2: 0.5rem;
  --keli-space-3: 0.75rem;
  --keli-space-4: 1rem;
  --keli-space-5: 1.25rem;
  --keli-space-6: 1.5rem;
  --keli-space-8: 2rem;
  --keli-space-12: 3rem;
  --keli-gutter-right: max(var(--keli-space-2), env(safe-area-inset-right));
  --keli-gutter-left: max(var(--keli-space-2), env(safe-area-inset-left));
  --keli-gutter-bottom: max(calc(2 * var(--keli-gutter-right)), env(safe-area-inset-bottom));
  --keli-target: 3rem;
  --keli-pill-min: 10rem;
  --keli-pill-radius: 0.25rem;
  --keli-brand-radius: 0.75rem;
  --keli-brand-height: 4.5rem;
  --keli-brand-width: 12rem;
  --keli-avatar: 2.5rem;
  --keli-avatar-compact: 2.25rem;
  --keli-icon: 1rem;
  --keli-rail: clamp(5.9375rem, 18vw, 18rem);
  --keli-content-max: 72rem;
  --keli-tab-rail: 6rem;
  --keli-tab-rail-compact: 5.25rem;
  --keli-tab-protrusion: 0.75rem;
  --keli-tab-radius: 0.375rem;
  --keli-tab-feather: 2rem;
  --keli-notch-depth: 0.375rem;
  --keli-notch-height: 0.75rem;
  --keli-border-width: 0.0625rem;
  --keli-focus-width: 0.1875rem;
  --keli-focus-gap: 0.125rem;
  --keli-duration-disclosure: 140ms;
  --keli-duration-tab: 160ms;
}

:root[data-keli-theme='light'] {
  color-scheme: light;
}

:root[data-keli-theme='dark'] {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --keli-duration-disclosure: 0ms;
    --keli-duration-tab: 0ms;
  }
}