:root {
  /* Primary colors */
  --clr-primary100: #52181e;
  --clr-primary200: #2e0206;

  /* Foreground / Background */
  --clr-fg: #fffaf7; /* text default */
  --clr-bg: #0c0c0c;

  /* UI colors (semantic) */
  --ui-bg: var(--clr-primary200);
  --ui-fg: var(--clr-fg);
  --ui-hover-bg: var(--clr-primary100);
  --ui-hover-fg: var(--clr-fg);
  --ui-selected-bg: var(--clr-primary100);
  --ui-selected-fg: var(--clr-fg);

  /* CTA button defaults */
  --cta-bg: var(--clr-fg); /* button background */
  --cta-fg: var(--clr-primary100); /* button text */
  --cta-border: var(--clr-primary100);

  /* Pressed/movement variables */
  --cta-pressed-x: 1px;
  --cta-pressed-y: 1px;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 3rem;

  /* Font sizes */
  /* size for dialog-box */
  --fs-dialog: clamp(0.825rem, 0.775rem + 0.25vw, 0.9375rem);

  --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --fs-sm: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  --fs-md: clamp(1.2rem, 1.1rem + 0.8vw, 1.5rem);
  --fs-lg: clamp(1.5rem, 1.4rem + 0.8vw, 1.75rem);
  --fs-xl: clamp(2rem, 1.8rem + 2vw, 2.8rem);

  /* Border radius */
  --radius-sm: 0.3125rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /*  Shadow */
  --box-shadow: inset 0 0 10px rgba(64, 56, 56, 0.356);

  /* Shadows */
  --shadow-inset-light: inset 3px 3px 5px #2a2a2a;
  --shadow-inset-dark: inset -3px -3px 5px #000;
  --shadow-btn-inset: inset -2px -2px 0 rgba(255, 255, 255, 0.1);

  /* Selection colors */
  --selection-bg: var(--clr-primary100);
  --selection-fg: var(--clr-fg);
}

/* Theme: VLS Noir */
body.theme-vls-noir {
  /* Brand */
  --clr-primary100: #5f0101;
  --clr-primary200: #1d0202;

  /* Layout */
  --clr-fg: #f0e5e3;
  --clr-bg: #050505;

  /* UI overrides (still referencing brand colors) */
  --ui-bg: var(--clr-primary100);
  --ui-fg: var(--clr-fg);
  --ui-hover-bg: var(--clr-primary200);
  --ui-hover-fg: var(--clr-fg);
  --ui-selected-bg: var(--clr-primary100);
  --ui-selected-fg: var(--clr-fg);

  --cta-bg: var(--clr-fg); /* button background */
  --cta-fg: var(--clr-primary100); /* button text */
  --cta-border: var(--clr-primary100);

  /* Shadows */
  --shadow-inset-light: inset 3px 3px 6px #1b1b1b;
  --shadow-inset-dark: inset -3px -3px 6px #000;
  --shadow-btn-inset: inset -2px -2px 0 rgba(255, 100, 100, 0.3);

  /* Selection colors */
  --selection-bg: var(--clr-primary100);
  --selection-fg: var(--clr-fg);
}

/* Theme: Alba Lux */
body.theme-alba-lux {
  /* Brand */
  --clr-primary100: #d36d73;
  --clr-primary200: #a94c52;

  /* Layout */
  --clr-fg: #121212;
  --clr-bg: #fffaf7;

  /* UI overrides (contrast safe) */
  --ui-bg: #f3e7e6; /* button bg */
  --ui-fg: #121212; /* button text */
  --ui-hover-bg: #e0e0e0; /* gray hover */
  --ui-hover-fg: #121212; /* black text */
  --ui-selected-bg: #a94c52;
  --ui-selected-fg: #fff;

  /* CTA button overrides */
  --cta-bg: var(--ui-bg); /* button background */
  --cta-fg: var(--ui-fg); /* button text */
  --cta-border: var(--clr-primary100);

  /* Shadows */
  --shadow-inset-light: inset 3px 3px 5px #bdb2b0;
  --shadow-inset-dark: inset -3px -3px 5px #7d6f6d;
  --shadow-btn-inset: inset -2px -2px 0 rgba(0, 0, 0, 0.1);

  /* Selection colors */
  --selection-bg: var(--clr-primary200);
  --selection-fg: var(--ui-selected-fg);
}

/* Theme: Blue Hour (Revised) */
body.theme-blue-hour {
  /* Brand */
  --clr-primary100: #1a2c42; /* Deep, cool Twilight Blue */
  --clr-primary200: #0f1f2a; /* Almost Black Blue, like a deepening night sky */

  /* Layout */
  --clr-fg: #d1d9e6; /* Lighter Silver, not too bright but still readable */
  --clr-bg: #0b141f; /* Near Black Navy background, closer to nightfall darkness */

  /* UI overrides */
  --ui-bg: var(--clr-primary100);
  --ui-fg: var(--clr-fg);
  --ui-hover-bg: #3a4a68; /* Muted blue with slight violet undertone for hover */
  --ui-hover-fg: var(--clr-fg);
  --ui-selected-bg: var(--clr-primary100);
  --ui-selected-fg: var(--clr-fg);

  --cta-bg: #3a4a68; /* Subtle, muted blue for CTA with cool undertones */
  --cta-fg: var(--clr-fg); /* Light text on CTA for readability */
  --cta-border: var(--clr-primary100);

  /* Shadows */
  --shadow-inset-light: inset 2px 2px 8px rgba(0, 0, 0, 0.4); /* Deeper shadow with a soft blur */
  --shadow-inset-dark: inset -3px -3px 8px rgba(0, 0, 0, 0.7); /* Darker inset shadow for more depth */
  --shadow-btn-inset: inset -1px -1px 3px rgba(255, 255, 255, 0.15); /* Soft white button highlight */

  /* Selection colors */
  --selection-bg: var(--clr-primary100);
  --selection-fg: var(--clr-fg);
}

/* Base body styles */
body {
  background-color: var(--clr-bg);
  color: var(--clr-fg);
  font-family: "Fira Code", sans-serif;
  font-size: var(--fs-sm);
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--space-sm);
  position: relative; /* required for overlay pseudo-element */
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

/* Hide native radio but keep accessible */
input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit; /* inherit color from parent */
  text-decoration: none; /* remove underline */
  transition: color 0.3s ease;
}

button,
a {
  -webkit-tap-highlight-color: transparent; /* iOS/Safari */
}

/* Fieldset reset */
fieldset {
  border: none; /* remove default border */
  margin: 0; /* remove default margin */
  padding: 0; /* remove default padding */
}

legend {
  padding: 0; /* remove padding */
  margin-bottom: var(--space-sm); /* small spacing below legend */
}

/* ---------------------------------
   Universal focus style for keyboard users
--------------------------------- */
:focus {
  outline: 2px solid var(--clr-primary100); /* pick a color that matches your theme */
  outline-offset: 2px;
}

/* Optional: only show outline for keyboard navigation */
:focus:not(:focus-visible) {
  outline: none;
}

/* Hover / focus styles for your custom select */
.theme-select:focus {
  border-color: var(--clr-primary200);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); /* subtle glow */
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}