/**
 * Provision — design tokens
 * docs/frontend-colors.md
 */
:root {
  --color-dark: #363636;
  --color-accent: #eb0a0a;
  --color-light: #f1f7ff;

  --color-text: var(--color-dark);
  --color-text-muted: #5c5c5c;
  --color-bg: #eef2f8;
  --color-surface: #ffffff;
  --color-primary: var(--color-accent);
  --color-sidebar-bg: #2a2a2a;
  --color-sidebar-text: var(--color-light);
  --color-border: rgba(54, 54, 54, 0.1);
  --color-border-strong: rgba(54, 54, 54, 0.18);

  --color-accent-hover: #c90909;
  --color-accent-active: #a80707;
  --color-accent-soft: rgba(235, 10, 10, 0.08);
  --color-accent-ring: rgba(235, 10, 10, 0.25);

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(54, 54, 54, 0.06);
  --shadow-md: 0 4px 16px rgba(54, 54, 54, 0.08);
  --shadow-lg: 0 12px 40px rgba(54, 54, 54, 0.12);
  --shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.15);

  --transition: 0.18s ease;
  --topbar-h: 64px;
  --sidebar-w: 260px;

  color-scheme: light;
}

html[data-theme='dark'] {
  --color-text: #e8eaed;
  --color-text-muted: #9aa0a8;
  --color-bg: #141416;
  --color-surface: #222226;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-accent-soft: rgba(235, 10, 10, 0.18);
  --color-accent-ring: rgba(235, 10, 10, 0.35);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}