/* Sleek tokens. Loaded after app.css so these values win.
   Old names stay as aliases so existing templates keep working. */

:root {
  --color-brand: #0f3550;
  --color-brand-ink: #ffffff;
  --color-canvas: #f5f7f9;
  --color-surface: #ffffff;
  --color-surface-alt: #eef2f5;
  --color-border: #dde3e9;
  --color-border-strong: #c3ccd4;
  --color-ink: #16222c;
  --color-ink-soft: #4c5a66;
  --color-ink-faint: #6b7785;
  --color-accent: #0b6fa0;
  --color-accent-hover: #09597f;
  --color-accent-soft: #e4f1f8;
  --color-pass: #1c8a4b;
  --color-pass-ink: #ffffff;
  --color-kill: #c22d2d;
  --color-kill-ink: #ffffff;
  --color-watch: #1565c0;
  --color-watch-ink: #ffffff;
  --color-success: #1c8a4b;
  --color-danger: #c22d2d;
  --color-warning: #9a6400;
  --color-warning-bg: #fdf3df;
  --color-focus: #ffb703;

  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-md: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: 1.875rem;
  --text-2xl: 2.25rem;

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

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.16);

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --navy: var(--color-brand);
  --navy2: #0c2a40;
  --link: var(--color-accent);
  --link-hover: var(--color-accent-hover);
  --active: var(--color-accent);
  --pass: var(--color-pass);
  --kill: var(--color-kill);
  --watch: var(--color-watch);
  --line: var(--color-border);
  --muted: var(--color-ink-soft);
  --text: var(--color-ink);
  --paper: var(--color-surface);
  --radius: var(--radius-sm);
  --sidebar-w: 16.25rem;
  --header-h: 4rem;
}

html {
  font-size: 100%;
}

html[data-text-scale="sm"] {
  font-size: 93.75%;
}

html[data-text-scale="lg"] {
  font-size: 112.5%;
}

html[data-text-scale="xl"] {
  font-size: 125%;
}