:root {
  --color-accent-l: 68%;
  --color-accent-c: 0.28;
  --color-accent-h: 256;
  --color-warning-l: 75%;
  --color-warning-c: 0.25;
  --color-warning-h: 80;
  --color-success-l: 70%;
  --color-success-c: 0.2;
  --color-success-h: 140;
  --color-error-l: 75%;
  --color-error-c: 0.32;
  --color-error-h: 29;
  --color-info-l: 72%;
  --color-info-c: 0.2;
  --color-info-h: 220;
  --color-neutral-h: 250;
}

:root {
  --color-accent: oklch(var(--color-accent-l) var(--color-accent-c) var(--color-accent-h));
  --color-accent-hover: oklch(58% var(--color-accent-c) var(--color-accent-h));
  --color-accent-subtle: oklch(var(--color-accent-l) var(--color-accent-c) var(--color-accent-h) / 0.12);
  --color-accent-border: oklch(var(--color-accent-l) var(--color-accent-c) var(--color-accent-h) / 0.25);
  --color-accent-transparent: oklch(var(--color-accent-l) var(--color-accent-c) var(--color-accent-h) / 0.6);

  --color-warning: oklch(var(--color-warning-l) var(--color-warning-c) var(--color-warning-h));
  --color-warning-bg: oklch(var(--color-warning-l) var(--color-warning-c) var(--color-warning-h) / 0.15);
  --color-warning-border: oklch(var(--color-warning-l) var(--color-warning-c) var(--color-warning-h) / 0.3);

  --color-success: oklch(var(--color-success-l) var(--color-success-c) var(--color-success-h));
  --color-success-bg: oklch(var(--color-success-l) var(--color-success-c) var(--color-success-h) / 0.2);
  --color-success-border: oklch(var(--color-success-l) var(--color-success-c) var(--color-success-h) / 0.3);

  --color-error: oklch(var(--color-error-l) var(--color-error-c) var(--color-error-h));
  --color-error-bg: color-mix(in oklch, var(--color-error) 20%, transparent);
  --color-error-border: color-mix(in oklch, var(--color-error) 50%, transparent);

  --color-info: oklch(var(--color-info-l) var(--color-info-c) var(--color-info-h));
  --color-info-bg: oklch(var(--color-info-l) var(--color-info-c) var(--color-info-h));
  --color-info-text: oklch(28% 0.03 var(--color-info-h));
  --color-info-glow: oklch(var(--color-info-l) var(--color-info-c) var(--color-info-h) / 0.28);

  --color-skip-refresh-bg: oklch(82% 0.12 var(--color-warning-h));
  --color-skip-refresh-text: oklch(35% 0.02 var(--color-warning-h));
  --color-skip-refresh-glow: oklch(82% 0.12 var(--color-warning-h) / 0.15);
}

:root {
  --bg-base: #ffffff;
  --bg-elevated: oklch(97% 0 0 / 0.95);
  --bg-overlay: oklch(0% 0 0 / 0.75);
  --bg-hover: oklch(95% 0.02 256);
  --bg-disabled: #f5f5f5;

  --text-primary: #333333;
  --text-secondary: #6c757d;
  --text-inverse: #ffffff;
  --text-muted-on-dark: rgba(255, 255, 255, 0.8);

  --surface-base: #ffffff;
  --surface-elevated: oklch(97% 0 0 / 0.95);
  --surface-hover: oklch(95% 0.02 256);
  --surface-subtle: oklch(0% 0 0 / 0.03);

  --border-base: #e0e0e0;
  --border-subtle: oklch(72% 0.03 256 / 0.45);
  --border-inverse: rgba(255, 255, 255, 0.25);

  --status-success-text: oklch(75% 0.12 230);
  --status-success-bg: oklch(55% 0.15 240 / 0.25);
  --status-success-border: oklch(60% 0.18 250 / 0.3);
  --status-info-text: oklch(78% 0.10 185);
  --status-info-bg: oklch(50% 0.10 190 / 0.25);
  --status-info-border: oklch(55% 0.12 195 / 0.3);

  --favorite-color: #d4a017;
  --favorite-glow: oklch(65% 0.15 85 / 0.5);
}

[data-theme="dark"] {
  --bg-base: #1a1a1a;
  --bg-elevated: oklch(25% 0.02 256 / 0.98);
  --bg-overlay: oklch(0% 0 0 / 0.75);
  --bg-hover: oklch(35% 0.02 256);
  --bg-disabled: #3a3a3a;

  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-inverse: #1a1a1a;
  --text-muted-on-dark: rgba(255, 255, 255, 0.8);

  --surface-base: #2d2d2d;
  --surface-elevated: oklch(25% 0.02 256 / 0.98);
  --surface-hover: oklch(35% 0.02 256);
  --surface-subtle: oklch(100% 0 0 / 0.03);

  --border-base: #404040;
  --border-subtle: oklch(90% 0.02 256 / 0.15);
  --border-inverse: rgba(255, 255, 255, 0.25);

  --status-success-text: oklch(75% 0.12 230);
  --status-success-bg: oklch(55% 0.15 240 / 0.25);
  --status-success-border: oklch(60% 0.18 250 / 0.3);
  --status-info-text: oklch(78% 0.10 185);
  --status-info-bg: oklch(50% 0.10 190 / 0.25);
  --status-info-border: oklch(55% 0.12 195 / 0.3);

  --color-info-bg: oklch(62% 0.18 var(--color-info-h));
  --color-info-text: oklch(98% 0.02 var(--color-info-h));
  --color-info-glow: oklch(62% 0.18 var(--color-info-h) / 0.4);

  --color-error-bg: color-mix(in oklch, var(--color-error) 15%, transparent);
  --color-error-border: color-mix(in oklch, var(--color-error) 40%, transparent);

  --favorite-color: #ffc107;
}

/* ── Preset: Nord ──────────────────────────────────────────── */

[data-theme-preset="nord"] {
  --color-accent-h: 213;
  --color-accent-c: 0.18;
  --color-accent-l: 62%;
  --color-warning-h: 35;
  --color-warning-c: 0.18;
  --color-success-h: 130;
  --color-error-l: 62%;
  --color-error-c: 0.22;
  --color-error-h: 5;
  --color-info-h: 195;
  --color-info-c: 0.18;

  --bg-base: oklch(96% 0.01 240);
  --bg-elevated: oklch(98% 0.008 240 / 0.95);
  --bg-hover: oklch(93% 0.02 240);
  --bg-disabled: oklch(92% 0.01 240);

  --text-primary: oklch(22% 0.03 260);
  --text-secondary: oklch(48% 0.03 260);
  --text-inverse: oklch(97% 0.01 240);

  --surface-base: oklch(97% 0.01 240);
  --surface-elevated: oklch(98% 0.008 240 / 0.95);
  --surface-hover: oklch(93% 0.02 240);
  --surface-subtle: oklch(0% 0 0 / 0.03);

  --border-base: oklch(82% 0.03 240);
  --border-subtle: oklch(82% 0.03 240 / 0.45);

  --favorite-color: oklch(72% 0.14 85);
  --favorite-glow: oklch(72% 0.14 85 / 0.5);
}

[data-theme="dark"][data-theme-preset="nord"] {
  --color-accent-h: 213;
  --color-accent-c: 0.18;
  --color-accent-l: 68%;
  --color-warning-h: 35;
  --color-warning-c: 0.18;
  --color-success-h: 130;
  --color-error-l: 65%;
  --color-error-c: 0.22;
  --color-error-h: 5;
  --color-info-h: 195;
  --color-info-c: 0.18;

  --bg-base: oklch(20% 0.03 260);
  --bg-elevated: oklch(24% 0.03 260 / 0.98);
  --bg-hover: oklch(30% 0.03 260);
  --bg-disabled: oklch(30% 0.02 260);

  --text-primary: oklch(87% 0.02 240);
  --text-secondary: oklch(68% 0.02 240);
  --text-inverse: oklch(20% 0.03 260);

  --surface-base: oklch(26% 0.03 260);
  --surface-elevated: oklch(24% 0.03 260 / 0.98);
  --surface-hover: oklch(30% 0.03 260);
  --surface-subtle: oklch(100% 0 0 / 0.03);

  --border-base: oklch(38% 0.03 260);
  --border-subtle: oklch(87% 0.02 240 / 0.15);

  --favorite-color: oklch(78% 0.15 85);
  --favorite-glow: oklch(78% 0.15 85 / 0.5);
}

/* ── Preset: Midnight ───────────────────────────────────────── */

[data-theme-preset="midnight"] {
  --color-accent-h: 300;
  --color-accent-c: 0.15;
  --color-accent-l: 52%;
  --color-warning-h: 50;
  --color-warning-c: 0.18;
  --color-success-h: 135;
  --color-error-h: 5;
  --color-error-l: 62%;
  --color-error-c: 0.22;
  --color-info-h: 195;
  --color-info-c: 0.12;

  --bg-base: oklch(96% 0.01 255);
  --bg-elevated: oklch(98% 0.008 255 / 0.95);
  --bg-hover: oklch(93% 0.02 255);
  --bg-disabled: oklch(92% 0.01 255);

  --text-primary: oklch(22% 0.03 260);
  --text-secondary: oklch(48% 0.03 260);
  --text-inverse: oklch(97% 0.01 255);

  --surface-base: oklch(97% 0.01 255);
  --surface-elevated: oklch(98% 0.008 255 / 0.95);
  --surface-hover: oklch(93% 0.02 255);
  --surface-subtle: oklch(0% 0 0 / 0.03);

  --border-base: oklch(80% 0.03 255);
  --border-subtle: oklch(80% 0.03 255 / 0.45);

  --favorite-color: oklch(72% 0.16 85);
  --favorite-glow: oklch(72% 0.16 85 / 0.5);
}

[data-theme="dark"][data-theme-preset="midnight"] {
  --color-accent-h: 300;
  --color-accent-c: 0.14;
  --color-accent-l: 68%;
  --color-warning-h: 50;
  --color-warning-c: 0.18;
  --color-success-h: 135;
  --color-error-h: 5;
  --color-error-l: 65%;
  --color-error-c: 0.22;
  --color-info-h: 195;
  --color-info-c: 0.12;

  --bg-base: oklch(18% 0.03 260);
  --bg-elevated: oklch(22% 0.03 260 / 0.98);
  --bg-hover: oklch(28% 0.03 260);
  --bg-disabled: oklch(28% 0.02 260);

  --text-primary: oklch(88% 0.02 255);
  --text-secondary: oklch(68% 0.02 255);
  --text-inverse: oklch(18% 0.03 260);

  --surface-base: oklch(24% 0.03 260);
  --surface-elevated: oklch(22% 0.03 260 / 0.98);
  --surface-hover: oklch(28% 0.03 260);
  --surface-subtle: oklch(100% 0 0 / 0.03);

  --border-base: oklch(36% 0.03 260);
  --border-subtle: oklch(88% 0.02 255 / 0.15);

  --favorite-color: oklch(78% 0.16 85);
  --favorite-glow: oklch(78% 0.16 85 / 0.5);
}

/* ── Preset: Monokai ───────────────────────────────────────── */

[data-theme-preset="monokai"] {
  --color-accent-h: 190;
  --color-accent-c: 0.24;
  --color-accent-l: 72%;
  --color-warning-h: 50;
  --color-warning-c: 0.22;
  --color-success-h: 140;
  --color-error-l: 60%;
  --color-error-c: 0.22;
  --color-error-h: 340;
  --color-info-h: 250;

  --bg-base: oklch(96% 0.01 80);
  --bg-elevated: oklch(98% 0.005 80 / 0.95);
  --bg-hover: oklch(93% 0.015 80);
  --bg-disabled: oklch(92% 0.01 80);

  --text-primary: oklch(20% 0.02 100);
  --text-secondary: oklch(45% 0.02 100);
  --text-inverse: oklch(97% 0.01 80);

  --surface-base: oklch(97% 0.008 80);
  --surface-elevated: oklch(98% 0.005 80 / 0.95);
  --surface-hover: oklch(93% 0.015 80);
  --surface-subtle: oklch(0% 0 0 / 0.03);

  --border-base: oklch(80% 0.02 80);
  --border-subtle: oklch(80% 0.02 80 / 0.45);

  --favorite-color: oklch(72% 0.16 85);
  --favorite-glow: oklch(72% 0.16 85 / 0.5);
}

[data-theme="dark"][data-theme-preset="monokai"] {
  --color-accent-h: 190;
  --color-accent-c: 0.24;
  --color-accent-l: 72%;
  --color-warning-h: 50;
  --color-warning-c: 0.22;
  --color-success-h: 140;
  --color-error-l: 65%;
  --color-error-c: 0.22;
  --color-error-h: 340;
  --color-info-h: 250;

  --bg-base: oklch(18% 0.02 100);
  --bg-elevated: oklch(22% 0.02 100 / 0.98);
  --bg-hover: oklch(28% 0.025 100);
  --bg-disabled: oklch(28% 0.015 100);

  --text-primary: oklch(90% 0.02 80);
  --text-secondary: oklch(70% 0.02 80);
  --text-inverse: oklch(18% 0.02 100);

  --surface-base: oklch(24% 0.02 100);
  --surface-elevated: oklch(22% 0.02 100 / 0.98);
  --surface-hover: oklch(28% 0.025 100);
  --surface-subtle: oklch(100% 0 0 / 0.03);

  --border-base: oklch(36% 0.02 100);
  --border-subtle: oklch(90% 0.02 80 / 0.15);

  --favorite-color: oklch(78% 0.16 85);
  --favorite-glow: oklch(78% 0.16 85 / 0.5);
}

/* ── Preset: Dracula ───────────────────────────────────────── */

[data-theme-preset="dracula"] {
  --color-accent-h: 265;
  --color-accent-c: 0.24;
  --color-accent-l: 68%;
  --color-warning-h: 45;
  --color-warning-c: 0.22;
  --color-success-h: 135;
  --color-error-l: 62%;
  --color-error-c: 0.22;
  --color-error-h: 350;
  --color-info-h: 195;

  --bg-base: oklch(96% 0.01 290);
  --bg-elevated: oklch(98% 0.008 290 / 0.95);
  --bg-hover: oklch(93% 0.02 290);
  --bg-disabled: oklch(92% 0.01 290);

  --text-primary: oklch(22% 0.04 290);
  --text-secondary: oklch(48% 0.04 290);
  --text-inverse: oklch(97% 0.01 290);

  --surface-base: oklch(97% 0.01 290);
  --surface-elevated: oklch(98% 0.008 290 / 0.95);
  --surface-hover: oklch(93% 0.02 290);
  --surface-subtle: oklch(0% 0 0 / 0.03);

  --border-base: oklch(80% 0.04 290);
  --border-subtle: oklch(80% 0.04 290 / 0.45);

  --favorite-color: oklch(72% 0.16 85);
  --favorite-glow: oklch(72% 0.16 85 / 0.5);
}

[data-theme="dark"][data-theme-preset="dracula"] {
  --color-accent-h: 265;
  --color-accent-c: 0.24;
  --color-accent-l: 72%;
  --color-warning-h: 45;
  --color-warning-c: 0.22;
  --color-success-h: 135;
  --color-error-l: 65%;
  --color-error-c: 0.22;
  --color-error-h: 350;
  --color-info-h: 195;

  --bg-base: oklch(18% 0.04 290);
  --bg-elevated: oklch(22% 0.04 290 / 0.98);
  --bg-hover: oklch(28% 0.04 290);
  --bg-disabled: oklch(28% 0.03 290);

  --text-primary: oklch(90% 0.02 290);
  --text-secondary: oklch(70% 0.03 290);
  --text-inverse: oklch(18% 0.04 290);

  --surface-base: oklch(24% 0.04 290);
  --surface-elevated: oklch(22% 0.04 290 / 0.98);
  --surface-hover: oklch(28% 0.04 290);
  --surface-subtle: oklch(100% 0 0 / 0.03);

  --border-base: oklch(36% 0.04 290);
  --border-subtle: oklch(90% 0.02 290 / 0.15);

  --favorite-color: oklch(78% 0.16 85);
  --favorite-glow: oklch(78% 0.16 85 / 0.5);
}

/* ── Preset: Solarized ─────────────────────────────────────── */

[data-theme-preset="solarized"] {
  --color-accent-h: 175;
  --color-accent-c: 0.18;
  --color-accent-l: 55%;
  --color-warning-h: 45;
  --color-warning-c: 0.20;
  --color-success-h: 68;
  --color-error-l: 62%;
  --color-error-c: 0.22;
  --color-error-h: 5;
  --color-info-h: 220;
  --color-info-c: 0.16;
  --color-info-l: 68%;

  --bg-base: oklch(95% 0.03 85);
  --bg-elevated: oklch(97% 0.025 85 / 0.95);
  --bg-hover: oklch(91% 0.035 85);
  --bg-disabled: oklch(90% 0.025 85);

  --text-primary: oklch(30% 0.06 200);
  --text-secondary: oklch(50% 0.04 200);
  --text-inverse: oklch(95% 0.03 85);

  --surface-base: oklch(96% 0.025 85);
  --surface-elevated: oklch(97% 0.025 85 / 0.95);
  --surface-hover: oklch(91% 0.035 85);
  --surface-subtle: oklch(0% 0 0 / 0.03);

  --border-base: oklch(78% 0.04 85);
  --border-subtle: oklch(78% 0.04 85 / 0.45);

  --favorite-color: oklch(68% 0.16 75);
  --favorite-glow: oklch(68% 0.16 75 / 0.5);
}

[data-theme="dark"][data-theme-preset="solarized"] {
  --color-accent-h: 175;
  --color-accent-c: 0.18;
  --color-accent-l: 60%;
  --color-warning-h: 45;
  --color-warning-c: 0.20;
  --color-success-h: 68;
  --color-error-l: 65%;
  --color-error-c: 0.22;
  --color-error-h: 5;
  --color-info-h: 220;
  --color-info-c: 0.16;
  --color-info-l: 68%;

  --bg-base: oklch(18% 0.05 200);
  --bg-elevated: oklch(22% 0.05 200 / 0.98);
  --bg-hover: oklch(28% 0.05 200);
  --bg-disabled: oklch(28% 0.04 200);

  --text-primary: oklch(72% 0.03 85);
  --text-secondary: oklch(62% 0.03 85);
  --text-inverse: oklch(18% 0.05 200);

  --surface-base: oklch(24% 0.05 200);
  --surface-elevated: oklch(22% 0.05 200 / 0.98);
  --surface-hover: oklch(28% 0.05 200);
  --surface-subtle: oklch(100% 0 0 / 0.03);

  --border-base: oklch(36% 0.04 200);
  --border-subtle: oklch(72% 0.03 85 / 0.15);

  --favorite-color: oklch(72% 0.16 75);
  --favorite-glow: oklch(72% 0.16 75 / 0.5);
}
