/*
 * Color system for heisenbookmarks
 * Light and dark theme support using OKLCH color space
 * Reference: https://oklch.com/
 */
:root {
  /* Light theme (default) - OKLCH format */
  --color-text: oklch(20% 0 0);
  --color-text-secondary: oklch(50% 0 0);
  --color-background: oklch(100% 0 0);
  --color-border: oklch(90% 0 0);
  --color-link-hover: oklch(55% 0.15 250);
  --color-sidebar-bg: oklch(97% 0 0);
  --color-sidebar-item-hover: oklch(93% 0 0);
  --color-nav-bg: oklch(100% 0 0);
  --color-card-bg: oklch(100% 0 0);
  --color-image-placeholder: oklch(95% 0 0);
  --color-tag-bg: oklch(93% 0 0);
  --color-tag-text: oklch(40% 0 0);
  --color-tag-hover: oklch(88% 0 0);
}

[data-theme="dark"] {
  /* Dark theme - OKLCH format */
  --color-text: oklch(92% 0 0);
  --color-text-secondary: oklch(70% 0 0);
  --color-background: oklch(20% 0 0);
  --color-border: oklch(40% 0 0);
  --color-link-hover: oklch(70% 0.12 250);
  --color-sidebar-bg: oklch(15% 0 0);
  --color-sidebar-item-hover: oklch(28% 0 0);
  --color-nav-bg: oklch(15% 0 0);
  --color-card-bg: oklch(25% 0 0);
  --color-image-placeholder: oklch(28% 0 0);
  --color-tag-bg: oklch(40% 0 0);
  --color-tag-text: oklch(98% 0 0);
  --color-tag-hover: oklch(50% 0 0);
}

body {
  background: var(--color-background);
  color: var(--color-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}