:root {
  color-scheme: light dark;

  /* Base accent color - change this one variable to update entire color scheme */
  --base-accent: oklch(0.75 0.17 170);

  --bg-color: light-dark(white, color(display-p3 0.091 0.091 0.091));
  --bg-highlight-color: light-dark(#eee, #4d4d4d);
  --bg-notification-color: light-dark(white, #222);
  --fg-color: light-dark(black, white);
  --mid-color: light-dark(#494949, #c6c6c6);
  --border-color: light-dark(#ccc, #555);

  --highlight-color: var(--base-accent);
  --highlight-contrast-color: black;

  --link-color: light-dark(
    oklch(from var(--base-accent) calc(l - 0.15) c h),
    var(--base-accent)
  );
  --link-hover-color: light-dark(
    var(--base-accent),
    oklch(from var(--base-accent) calc(l - 0.15) c h)
  );

  /* Header colors with transparency */
  --header-bg-color: oklch(from var(--base-accent) l c h / 0.85);
  --header-link-hover-color: light-dark(
    oklch(from var(--base-accent) calc(l + 0.1) calc(c + 0.05) h / 0.85),
    oklch(from var(--base-accent) calc(l + 0.05) calc(c + 0.02) h / 0.85)
  );

  --header-shadow: light-dark(
    0 0 0.5em rgba(106, 106, 106, 0.05),
    0 0 0.5em rgba(0,0,0,0.02)
  ),
  light-dark(
    0 0 0.5em rgba(0,0,0,0.02),
    0 0 0.5em rgba(0,0,0,0.02)
  ),
  light-dark(
    inset 0 -0.0625rem 0 0 rgba(255,255,255, 0.25),
    inset 0 -0.0625em 0 0 rgba(255,255,255, 0.25)
  ),
  light-dark(
    inset 0 0.0625em 0 0 rgba(255,255,255, 0.5),
    inset 0 0.0625em 0 0 rgba(255,255,255, 0.25)
  );

  --danger-color: light-dark(rgb(180, 9, 9), rgb(231, 47, 47));
  --positive-color: light-dark(color(display-p3 0.145 0.655 0.029), color(display-p3 0.23 0.786 0.104));
}

/* Explicit light theme - overrides system preference */
[data-theme="light"] {
  color-scheme: light;
}

/* Explicit dark theme - overrides system preference */
[data-theme="dark"] {
  color-scheme: dark;
}

/* Color palette - override base accent color */
[data-color="red"] {
  --base-accent: oklch(0.60 0.24 25);
}

[data-color="orange"] {
  --base-accent: oklch(0.75 0.25 50);
}

[data-color="yellow"] {
  --base-accent: oklch(0.82 0.14 90);
}

[data-color="green"] {
  --base-accent: oklch(0.75 0.16 130);
}

[data-color="teal"] {
  /* Default - already defined in :root */
}

[data-color="blue"] {
  --base-accent: oklch(0.58 0.22 250);
}

[data-color="purple"] {
  --base-accent: oklch(0.70 0.17 290);
}

[data-color="pink"] {
  --base-accent: oklch(0.72 0.28 345);
}

[data-color="gray"] {
  --base-accent: oklch(0.65 0.02 0);
}