@import url("https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&family=Yeseva+One&display=swap");

.logo {
  font-family: "Judson", monospace;
}

:root {
  --bg: white;
  --text: black;
  --heading: black;
  --text-light: rgba(0, 0, 0, 0.65);
  --button-bg: black;
  --button-bg-hover: rgba(0, 0, 0, 0.85);
  --button-text: white;
  --button-text-hover: white;
  --border-color: black;
  --border-color-light: rgba(0, 0, 0, 0.25);
  --hover-bg: rgba(0, 0, 0, 0.1);
  --hover-text: black;
  --label-bg-color: rgba(0, 0, 0, 0.65);
  --label-text-color: white;
}

[data-theme="dark"] {
  --bg: #141414;
  --text: #f5f5f5;
  --heading: #ffffff;
  --text-light: rgba(255, 255, 255, 0.65);
  --button-bg: #c4c4c4;
  --button-bg-hover: #757575;
  --button-text: #000000;
  --button-text-hover: #ffffff;
  --border-color: #d3d3d3;
  --border-color-light: rgba(255, 255, 255, 0.15);
  --hover-bg: rgba(255, 255, 255, 0.1);
  --hover-text: #ffffff;
  --label-bg-color: rgba(255, 255, 255, 0.15);
  --label-text-color: #ffffff;
}

[data-theme="retro"] {
  --bg: #e2d9c7;
  --text: black;
  --heading: black;
  --text-light: rgba(0, 0, 0, 0.65);
  --button-bg: black;
  --button-bg-hover: rgba(0, 0, 0, 0.85);
  --button-text: #e2d9c7;
  --button-text-hover: #e2d9c7;
  --border-color: black;
  --border-color-light: rgba(0, 0, 0, 0.25);
  --hover-bg: rgba(0, 0, 0, 0.1);
  --hover-text: black;
  --label-bg-color: rgba(0, 0, 0, 0.65);
  --label-text-color: #e2d9c7;
}

[data-theme="blueprint"] {
  --bg: #0a2342; /* Deep navy */
  --text: #cfe8ff; /* Light blueprint line color */
  --heading: #ffffff;
  --text-light: rgba(207, 232, 255, 0.75);
  --button-bg: #1d4e89;
  --button-bg-hover: #163d6b;
  --button-text: #ffffff;
  --button-text-hover: #ffffff;
  --border-color: #387bb7;
  --border-color-light: rgba(207, 232, 255, 0.2);
  --hover-bg: rgba(255, 255, 255, 0.1);
  --hover-text: #ffffff;
  --label-bg-color: rgba(255, 255, 255, 0.15);
  --label-text-color: #ffffff;
}

[data-theme="pink"] {
  --bg: #fff0f5; /* Lavender blush background */
  --text: #5c1a33; /* Deep rose for text */
  --heading: #8b004d; /* Strong pinkish heading */
  --text-light: rgba(92, 26, 51, 0.75); /* Soft version of main text */
  --button-bg: #f78fb3; /* Bright pink button */
  --button-bg-hover: #f368a0; /* Deeper hover */
  --button-text: #ffffff; /* White button text */
  --button-text-hover: #ffffff;
  --border-color: #f5c1d1; /* Light pink border */
  --border-color-light: rgba(245, 193, 209, 0.3); /* Faint border */
  --hover-bg: rgba(255, 182, 193, 0.2); /* Light pink hover */
  --hover-text: #8b004d; /* Match heading for emphasis */
  --label-bg-color: rgba(255, 192, 203, 0.15); /* Pale pink label bg */
  --label-text-color: #8b004d; /* Bold label text */
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: system-ui, sans-serif;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Yeseva One", sans-serif;
  font-weight: 400;
}