:root {
  --color-dark: #181818;
  --color-light: #f5f5f5;

  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.35);

  --container-max: 1100px;
  --header-h: 90px;

  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-80: 80px;
  --space-100: 100px;

  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-score: "Tomorrow", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;

  --lh-tight: 1.15;
  --lh-normal: 1.35;
  --lh-relaxed: 1.55;

  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  --focus-ring: 0 0 0 3px rgba(88, 155, 255, 0.55);
  --tap-highlight: rgba(88, 155, 255, 0.22);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 320ms;

  --z-header: 20;
  --z-sidebar: 18;
  /* Popovers w treści kategorii: nad listą lig, pod fixed headerem i category-nav. */
  --z-category-popover: 10;
  --z-fab: 40;
  --z-drawer: 60;

  --sidebar-w-expanded: 220px;
  --sidebar-w-collapsed: 48px;
  --sidebar-w: var(--sidebar-w-expanded);
  --sidebar-icon-size: 20px;
}

html {
  color-scheme: only light;
}

html[data-theme="light"] {
  color-scheme: only light;
  --bg: var(--color-light);
  --fg: #333333;

  --surface-1: #ffffff;
  --surface-2: #f6f6f6;
  --surface-3: #efefef;

  --border: rgba(20, 20, 20, 0.12);
  --border-strong: rgba(20, 20, 20, 0.22);

  --muted: rgba(20, 20, 20, 0.68);
  --muted-2: rgba(20, 20, 20, 0.52);

  --brand: #1a55ff;
  --brand-2: #00c2ff;
  --brand-contrast: #ffffff;

  --danger: #ff0046;
  --success: #16a34a;
  --warning: #f59e0b;

  --header-bg: #ebebeb;
  --header-fg: var(--fg);

  --footer-bg: #ffffff;
  --footer-fg: var(--fg);

  --sidebar-bg: #ffffff;
  --sidebar-flyout-bg: #ffffff;
  --sidebar-link-fg: #333333;
  --sidebar-link-hover-fg: #111111;
  --sidebar-link-hover-bg: rgba(20, 20, 20, 0.06);
  --sidebar-value: #d64545;
  --sidebar-draft-bg: #333333;
  --sidebar-draft-fg: #ffffff;
  --sidebar-draft-fire: #f5a623;
  --sidebar-draft-watermark: url("/img/ICONSNAV/LIGHT/draft.png");
  --sidebar-draft-watermark-opacity: 0.22;
}

html[data-theme="dark"] {
  color-scheme: only light;
  --bg: var(--color-dark);
  --fg: #ffffff;

  --surface-1: #1f1f1f;
  --surface-2: #252525;
  --surface-3: #2c2c2c;

  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);

  --muted: rgba(240, 240, 240, 0.74);
  --muted-2: rgba(240, 240, 240, 0.58);

  --brand: #5aa2ff;
  --brand-2: #00d4ff;
  --brand-contrast: #0e0e0e;

  --danger: #ff0046;
  --success: #33d17a;
  --warning: #ffb020;

  --header-bg: #141414;
  --header-fg: var(--fg);

  --footer-bg: #141414;
  --footer-fg: var(--fg);

  --sidebar-bg: #141414;
  --sidebar-flyout-bg: #1f1f1f;
  --sidebar-link-fg: #e8e8e8;
  --sidebar-link-hover-fg: #ffffff;
  --sidebar-link-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-value: #ff6b6b;
  --sidebar-draft-bg: #ffffff;
  --sidebar-draft-fg: #141414;
  --sidebar-draft-fire: #f5a623;
  --sidebar-draft-watermark: url("/img/ICONSNAV/DARK/draft.png");
  --sidebar-draft-watermark-opacity: 0.2;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
  }
}