/**
 * CSS Variables - Theme colors and spacing
 */

:root {
  /* `theme` palette generated at https://clrbug.pages.dev/ffcbff/007586 */

  --theme-50: oklch(0.98 0.0313 326.28deg);
  --theme-100: oklch(0.95 0.0383 326.28deg);
  --theme-200: oklch(0.9034 0.0892 326.28deg); /* #ffcbff */
  --theme-300: oklch(0.8259 0.0893 303.47deg);
  --theme-400: oklch(0.7485 0.0895 280.66deg);
  --theme-500: oklch(0.6711 0.0897 257.84deg);
  --theme-600: oklch(0.5937 0.0899 235.03deg);
  --theme-700: oklch(0.5163 0.09 212.22deg); /* #007586 */
  --theme-800: oklch(0.42 0.0884 212.22deg);
  --theme-900: oklch(0.27 0.0766 212.22deg);
  --theme-950: oklch(0.12 0.0534 212.22deg);

  /* `neutral` palette generated at https://clrbug.pages.dev/3c3a38/f2edee */

  --neutral-50: oklch(0.98 0.0019 3.34deg);
  --neutral-100: oklch(0.9503 0.0055 3.34deg); /* #f2edee */
  --neutral-200: oklch(0.8645 0.0054 12.53deg);
  --neutral-300: oklch(0.7787 0.0052 21.72deg);
  --neutral-400: oklch(0.6929 0.0051 30.92deg);
  --neutral-500: oklch(0.6071 0.0049 40.11deg);
  --neutral-600: oklch(0.5213 0.0047 49.3deg);
  --neutral-700: oklch(0.4355 0.0046 58.49deg);
  --neutral-800: oklch(0.3498 0.0044 67.68deg); /* #3c3a38 */
  --neutral-900: oklch(0.27 0.0038 67.68deg);
  --neutral-950: oklch(0.12 0.0026 67.68deg);

  /* Semantic colors */
  --text-color: var(--neutral-800);
  --text-muted: var(--neutral-600);
  --text-inverse: var(--neutral-50);

  --bg-color: var(--neutral-50);
  --bg-subtle: var(--neutral-100);
  --bg-card: white;
  --bg-detail: var(--theme-50);

  --border-color: var(--neutral-200);
  --border-focus: var(--theme-500);

  --accent-color: var(--theme-600);
  --accent-hover: var(--theme-700);
  --accent-light: var(--theme-100);

  --error-color: #dc2626;
  --error-bg: #fef2f2;

  --success-color: #16a34a;
  --success-bg: #f0fdf4;

  /* Spacing scale */
  --spacer-1: 0.25rem; /* 4px */
  --spacer-2: 0.5rem; /* 8px */
  --spacer-3: 1rem; /* 16px */
  --spacer-4: 1.5rem; /* 24px */
  --spacer-5: 2rem; /* 32px */
  --spacer-6: 3rem; /* 48px */

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Container */
  --container-max: 48rem;
  --container-padding: var(--spacer-4);
}

/**
 * Dark mode - supports both system preference and manual toggle
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Flip the semantic colors */
    --text-color: var(--neutral-200);
    --text-muted: var(--neutral-300);
    --text-inverse: var(--neutral-900);

    --bg-color: var(--neutral-950);
    --bg-subtle: var(--neutral-800);
    --bg-card: var(--neutral-900);
    --bg-detail: var(--theme-900);

    --border-color: var(--neutral-700);
    --border-focus: var(--theme-400);

    --accent-color: var(--theme-400);
    --accent-hover: var(--theme-300);
    --accent-light: var(--theme-950);

    --error-color: #f87171;
    --error-bg: rgba(220, 38, 38, 0.15);

    --success-color: #4ade80;
    --success-bg: rgba(22, 163, 74, 0.15);

    /* Softer shadows in dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  }
}

/* Manual dark mode toggle */
[data-theme="dark"] {
  /* Flip the semantic colors */
  --text-color: var(--neutral-200);
  --text-muted: var(--neutral-300);
  --text-inverse: var(--neutral-900);

  --bg-color: var(--neutral-950);
  --bg-subtle: var(--neutral-800);
  --bg-card: var(--neutral-900);
  --bg-detail: var(--theme-900);

  --border-color: var(--neutral-700);
  --border-focus: var(--theme-400);

  --accent-color: var(--theme-400);
  --accent-hover: var(--theme-300);
  --accent-light: var(--theme-950);

  --error-color: #f87171;
  --error-bg: rgba(220, 38, 38, 0.15);

  --success-color: #4ade80;
  --success-bg: rgba(22, 163, 74, 0.15);

  /* Softer shadows in dark mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}