/* ============================================================
   Лимес — Design Tokens
   Source: docs/strategy/07-ui-kit.md §3, §4, §5
   ============================================================ */

:root,
[data-theme="light"] {
  /* ===== Brand ===== */
  --color-brand-primary: #1F3D2A;
  --color-brand-primary-hover: #2A5239;
  --color-brand-accent: #B8842B;
  --color-brand-accent-hover: #CB9438;
  --color-brand-ink: #0F1115;

  /* ===== Verdict ===== */
  --color-verdict-pass: #2D6A4F;
  --color-verdict-pass-bg: #E6F2EC;
  --color-verdict-review: #A0631E;
  --color-verdict-review-bg: #FAEFD9;
  --color-verdict-block: #9B2C2C;
  --color-verdict-block-bg: #F7E4E4;

  /* ===== State (UI, NOT verdict) ===== */
  --color-info: #2563EB;
  --color-success: #16A34A;
  --color-warning: #CA8A04;
  --color-error: #DC2626;

  /* ===== Neutrals (12 stops, warm) ===== */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F8F8F7;
  --color-neutral-100: #F1F1EE;
  --color-neutral-200: #E5E5E0;
  --color-neutral-300: #D4D4CD;
  --color-neutral-400: #A8A8A0;
  --color-neutral-500: #7B7B73;
  --color-neutral-600: #5C5C56;
  --color-neutral-700: #3F3F3B;
  --color-neutral-800: #2A2A28;
  --color-neutral-900: #1A1A19;
  --color-neutral-1000: #0F1115;

  /* ===== Domain group colours (5 groups for 24 categories) ===== */
  --color-domain-violent: #7C2D12;
  --color-domain-speech: #5C4023;
  --color-domain-content: #3F4D2C;
  --color-domain-pii: #2C4A5C;
  --color-domain-disinfo: #5C4A2C;

  /* ===== Surface (light defaults) ===== */
  --color-background: var(--color-neutral-50);
  --color-surface: var(--color-neutral-0);
  --color-surface-hover: var(--color-neutral-100);
  --color-surface-active: var(--color-neutral-200);
  --color-surface-sunken: var(--color-neutral-100);
  --color-foreground: var(--color-neutral-1000);
  --color-foreground-muted: var(--color-neutral-700);
  --color-foreground-subtle: var(--color-neutral-500);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-focus: var(--color-brand-primary);

  /* ===== Typography ===== */
  --font-sans: "Inter", "Inter Display", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Inter", system-ui, sans-serif;

  /* Type scale */
  --text-display-xl: 64px;
  --text-display-lg: 48px;
  --text-display-md: 36px;
  --text-h1: 28px;
  --text-h2: 22px;
  --text-h3: 18px;
  --text-h4: 16px;
  --text-body-lg: 17px;
  --text-body: 15px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --text-mono: 13px;
  --text-num: 15px;

  /* ===== Spacing (4px base) ===== */
  --space-0: 0;
  --space-px: 1px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ===== Radius ===== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* ===== Shadow ===== */
  --shadow-xs: 0 1px 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 16px -4px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 32px -8px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px rgba(31, 61, 42, 0.25);

  /* ===== Motion ===== */
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);

  /* ===== Layout ===== */
  --container-max: 1240px;
  --container-narrow: 880px;
}

/* ============================================================
   Dark theme — invert neutrals, swap verdict to dark variants
   ============================================================ */
[data-theme="dark"] {
  --color-neutral-0: #0A0B0E;
  --color-neutral-50: #101115;
  --color-neutral-100: #15171C;
  --color-neutral-200: #1C1F26;
  --color-neutral-300: #262A33;
  --color-neutral-400: #3A3F4A;
  --color-neutral-500: #585F6B;
  --color-neutral-600: #7B8290;
  --color-neutral-700: #A8AEBB;
  --color-neutral-800: #D2D6DD;
  --color-neutral-900: #E8EAEE;
  --color-neutral-1000: #F4F4F2;

  --color-verdict-pass: #52B788;
  --color-verdict-pass-bg: #1A2E25;
  --color-verdict-review: #D9A551;
  --color-verdict-review-bg: #3B2D14;
  --color-verdict-block: #E07474;
  --color-verdict-block-bg: #3A1E1E;

  --color-background: var(--color-neutral-0);
  --color-surface: var(--color-neutral-50);
  --color-surface-hover: var(--color-neutral-100);
  --color-surface-active: var(--color-neutral-200);
  --color-surface-sunken: var(--color-neutral-100);
  --color-foreground: var(--color-neutral-1000);
  --color-foreground-muted: var(--color-neutral-700);
  --color-foreground-subtle: var(--color-neutral-500);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-focus: #52B788;

  --shadow-xs: 0 1px 1px 0 rgba(0, 0, 0, 0.20);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 8px 16px -4px rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 16px 32px -8px rgba(0, 0, 0, 0.60);
  --shadow-focus: 0 0 0 3px rgba(82, 183, 136, 0.30);
}