:root {
  /* Rose Pine (Dark) */
  --base: #191724;
  --surface: #1f1d2e;
  --overlay: #26233a;
  --muted: #6e6a86;
  --subtle: #908caa;
  --text: #e0def4;
  --love: #eb6f92;
  --gold: #f6c177;
  --rose: #ebbcba;
  --pine: #31748f;
  --foam: #9ccfd8;
  --iris: #c4a7e7;

  --background: var(--base);
  --card-bg: var(--surface);
  --primary: var(--text);
  --secondary: var(--subtle);
  --accent: var(--rose);
  --link: var(--iris);
  --link-hover: var(--foam);
}

/* Rose Pine (Dawn) */
[data-theme="light"] {
  --base: #faf4ed;
  --surface: #fffaf3;
  --overlay: #f2e9e1;
  --muted: #9893a5;
  --subtle: #797593;
  --text: #575279;
  --love: #b4637a;
  --gold: #ea9d34;
  --rose: #d7827e;
  --pine: #286983;
  --foam: #56949f;
  --iris: #907aa9;

  --background: var(--base);
  --card-bg: var(--surface);
  --primary: var(--text);
  --secondary: var(--subtle);
  --accent: var(--rose);
  --link: var(--pine);
  --link-hover: var(--iris);
}

html {
  transition:
    background-color 0.6s ease,
    color 0.6s ease;
}