:root {
  --bg-main: #ffffff;
  --bg-card: #f8f9fa;
  --border: #e0e0e0;
  --text-primary: #1a1a1a;
  --text-secondary: #5f6368;
  --text-muted: #757575;
  --accent: #202124;
  --accent-glow: rgba(0, 0, 0, 0.05);
}

:root {
  /* Catppuccin Mocha Palette */
  --colour_01: #c6c6c6; /* Text / Snowy White */
  --colour_02: #a5a5a5; /* Light Gray */
  --colour_03: #f5a97f; /* Peach */
  --colour_04: #f4b8e4; /* Pink */
  --colour_05: #1e1e2e; /* Base */
  --colour_06: #cba6f7; /* Mauve */
  --colour_07: #999999; /* Overlay Gray */
  --colour_08: #6e6a86; /* Subtext0 / Muted */
  --colour_09: #f5c2e7; /* Pink Accent */
  --colour_10: #f38ba8; /* Red Accent */
  --colour_11: #302d41; /* Surface0 / Card Background */
  --colour_12: #b4befe; /* Blue Accent */
  --colour_13: #7c6f64; /* Overlay1 */
  --colour_14: #d9d9d9; /* Text Primary */
  --colour_15: #1e1e2e; /* Base Dark */
  --colour_16: #575268; /* Subtext1 / Secondary text */

  /* Semantic Colors */
  --bg-main: var(--colour_15);
  --bg-card: var(--colour_11);
  --border: var(--colour_08);
  --text-primary: var(--colour_14);
  --text-secondary: var(--colour_07);
  --text-muted: var(--colour_08);
  --accent: var(--colour_09);
  --accent-glow: rgba(245, 194, 231, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Catppuccin Mocha Palette */
    --colour_01: #c6c6c6; /* Text / Snowy White */
    --colour_02: #a5a5a5; /* Light Gray */
    --colour_03: #f5a97f; /* Peach */
    --colour_04: #f4b8e4; /* Pink */
    --colour_05: #1e1e2e; /* Base */
    --colour_06: #cba6f7; /* Mauve */
    --colour_07: #999999; /* Overlay Gray */
    --colour_08: #6e6a86; /* Subtext0 / Muted */
    --colour_09: #f5c2e7; /* Pink Accent */
    --colour_10: #f38ba8; /* Red Accent */
    --colour_11: #302d41; /* Surface0 / Card Background */
    --colour_12: #b4befe; /* Blue Accent */
    --colour_13: #7c6f64; /* Overlay1 */
    --colour_14: #d9d9d9; /* Text Primary */
    --colour_15: #1e1e2e; /* Base Dark */
    --colour_16: #575268; /* Subtext1 / Secondary text */

    /* Semantic Colors */
    --bg-main: var(--colour_15);
    --bg-card: var(--colour_11);
    --border: var(--colour_08);
    --text-primary: var(--colour_14);
    --text-secondary: var(--colour_07);
    --text-muted: var(--colour_08);
    --accent: var(--colour_09);
    --accent-glow: rgba(245, 194, 231, 0.25);
  }
}


/* Keep the home logo looking like normal text */
.home-link {
  color: inherit; /* use the same color as the h1 text */
  text-decoration: none; /* remove underline */
}

.home-link:hover {
  text-decoration: underline; /* optional: subtle hover effect */
}

.view-home .btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border);
}
.view-home .btn-secondary:hover {
  color: var(--accent);
  background: var(--border);
  border-color: var(--text-secondary);
}

.view-home .btn-tertiary {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border);
}

.view-home .btn-tertiary:hover {
  color: var(--accent);
  background: var(--border);
  border-color: var(--text-secondary);
}