/* Dizajnové tokeny - svetlý aj tmavý režim. */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;

  --bg: #f5f6f8;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e9ecf1;
  --border: #e2e5ea;
  --border-strong: #cfd4dc;

  --text: #14161a;
  --text-secondary: #4b5361;
  --text-muted: #7c8493;

  --primary: #5b5bd6;
  --primary-hover: #4a4ac4;
  --primary-soft: #ececfb;
  --primary-text: #ffffff;

  --danger: #dc2f36;
  --danger-soft: #fdecec;
  --warning: #d97706;
  --warning-soft: #fdf3e3;
  --success: #15803d;
  --success-soft: #e8f6ed;
  --info: #0369a1;

  --priority-low: #94a3b8;
  --priority-normal: #3b82f6;
  --priority-high: #f59e0b;
  --priority-urgent: #ef4444;

  --radius-sm: 7px;
  --radius: 11px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(16, 20, 30, .06);
  --shadow-sm: 0 1px 3px rgba(16, 20, 30, .08), 0 1px 2px rgba(16, 20, 30, .04);
  --shadow-md: 0 6px 16px rgba(16, 20, 30, .10), 0 2px 5px rgba(16, 20, 30, .05);
  --shadow-lg: 0 18px 48px rgba(16, 20, 30, .18), 0 4px 12px rgba(16, 20, 30, .08);

  --sidebar-width: 252px;
  --sidebar-collapsed: 68px;
  --topbar-height: 60px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 22px; --space-6: 30px; --space-7: 42px;

  --transition: 140ms cubic-bezier(.4, 0, .2, 1);
}

:root[data-theme='dark'],
:root[data-theme='auto'] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] { color-scheme: dark; }
}

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

/* Tmavé hodnoty */
:root[data-theme='dark'],
:root[data-theme='auto'] {
  --dark-bg: #0f1115;
  --dark-surface: #171a20;
  --dark-surface-2: #1e222a;
  --dark-surface-3: #262b34;
  --dark-border: #2a2f39;
  --dark-border-strong: #3a4150;
  --dark-text: #e7e9ee;
  --dark-text-secondary: #b3bac6;
  --dark-text-muted: #868f9e;
}

:root[data-theme='dark'] {
  --bg: var(--dark-bg);
  --bg-elevated: var(--dark-surface);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --surface-3: var(--dark-surface-3);
  --border: var(--dark-border);
  --border-strong: var(--dark-border-strong);
  --text: var(--dark-text);
  --text-secondary: var(--dark-text-secondary);
  --text-muted: var(--dark-text-muted);
  --primary: #7b7bf0;
  --primary-hover: #8d8df5;
  --primary-soft: #23244a;
  --danger: #f2555b;
  --danger-soft: #3a1e21;
  --warning: #f0a132;
  --warning-soft: #3a2c17;
  --success: #35c46f;
  --success-soft: #14301f;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, .5);
  --shadow-lg: 0 22px 55px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] {
    --bg: var(--dark-bg);
    --bg-elevated: var(--dark-surface);
    --surface: var(--dark-surface);
    --surface-2: var(--dark-surface-2);
    --surface-3: var(--dark-surface-3);
    --border: var(--dark-border);
    --border-strong: var(--dark-border-strong);
    --text: var(--dark-text);
    --text-secondary: var(--dark-text-secondary);
    --text-muted: var(--dark-text-muted);
    --primary: #7b7bf0;
    --primary-hover: #8d8df5;
    --primary-soft: #23244a;
    --danger: #f2555b;
    --danger-soft: #3a1e21;
    --warning: #f0a132;
    --warning-soft: #3a2c17;
    --success: #35c46f;
    --success-soft: #14301f;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, .5);
    --shadow-lg: 0 22px 55px rgba(0, 0, 0, .6);
  }
}