:root {
  --rosewater: #f5e0dc;
  --flamingo: #f2cdcd;
  --pink: #f5c2e7;
  --mauve: #cba6f7;
  --red: #f38ba8;
  --maroon: #eba0ac;
  --peach: #fab387;
  --yellow: #f9e2af;
  --green: #a6e3a1;
  --teal: #94e2d5;
  --sky: #89dceb;
  --sapphire: #74c7ec;
  --blue: #89b4fa;
  --lavender: #b4befe;
  --text: #4c4f69;
  --subtext1: #5c5f77;
  --subtext0: #6c6f85;
  --overlay2: #7c7f93;
  --overlay1: #8c8fa1;
  --overlay0: #9ca0b0;
  --surface2: #acb0be;
  --surface1: #bcc0cc;
  --surface0: #ccd0da;
  --base: #eff1f5;
  --mantle: #e6e9ef;
  --crust: #dce0e8;

  /* New accent colors */
  --accent-primary: var(--blue);
  --accent-secondary: var(--mauve);
  --accent-tertiary: var(--pink);

  /* Visual interest variables */
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --hover-transition: all 0.25s ease;
  --subtle-border: 1px solid var(--surface0);
}

.dark-mode {
  --rosewater: #f4dbd6;
  --flamingo: #f0c6c6;
  --pink: #f5bde6;
  --mauve: #c6a0f6;
  --red: #ed8796;
  --maroon: #ee99a0;
  --peach: #f5a97f;
  --yellow: #eed49f;
  --green: #a6da95;
  --teal: #8bd5ca;
  --sky: #91d7e3;
  --sapphire: #7dc4e4;
  --blue: #8aadf4;
  --lavender: #b7bdf8;
  --text: #cad3f5;
  --subtext1: #b8c0e0;
  --subtext0: #a5adcb;
  --overlay2: #939ab7;
  --overlay1: #8087a2;
  --overlay0: #6e738d;
  --surface2: #5b6078;
  --surface1: #494d64;
  --surface0: #363a4f;
  --base: #24273a;
  --mantle: #1e2030;
  --crust: #181926;

  /* Dark mode accent colors */
  --accent-primary: var(--sky);
  --accent-secondary: var(--lavender);
  --accent-tertiary: var(--maroon);

  /* Dark mode visual interest */
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  --subtle-border: 1px solid var(--surface1);
}