/*
 * Application-wide CSS for Propshaft.
 * Catppuccin Mocha is the only supported color scheme for this site.
 */

:root {
  --color-rosewater: 245 224 220;
  --color-flamingo: 242 205 205;
  --color-pink: 245 194 231;
  --color-mauve: 203 166 247;
  --color-red: 243 139 168;
  --color-maroon: 235 160 172;
  --color-peach: 250 179 135;
  --color-yellow: 249 226 175;
  --color-green: 166 227 161;
  --color-teal: 148 226 213;
  --color-sky: 137 220 235;
  --color-sapphire: 116 199 236;
  --color-blue: 137 180 250;
  --color-lavender: 180 190 254;
  --color-text: 205 214 244;
  --color-subtext1: 186 194 222;
  --color-subtext0: 166 173 200;
  --color-overlay2: 147 153 178;
  --color-overlay1: 127 132 156;
  --color-overlay0: 108 112 134;
  --color-surface2: 88 91 112;
  --color-surface1: 69 71 90;
  --color-surface0: 49 50 68;
  --color-base: 30 30 46;
  --color-mantle: 24 24 37;
  --color-crust: 17 17 27;
}

html {
  scroll-behavior: smooth;
  background: rgb(var(--color-base));
}

body {
  min-height: 100vh;
  background: rgb(var(--color-base));
  color: rgb(var(--color-text));
}

a {
  color: inherit;
}

/*
 * Admin form polish.
 *
 * Several legacy admin CRUD templates still carry light-theme Tailwind utility
 * classes such as text-gray-700 and border-gray-300. Scope stronger selectors to
 * the admin layout so those forms render with readable Catppuccin Mocha colors
 * without touching the public site.
 */
.admin-shell label,
.admin-shell legend {
  color: rgb(var(--color-text));
}

.admin-shell input[type="text"],
.admin-shell input[type="email"],
.admin-shell input[type="password"],
.admin-shell input[type="url"],
.admin-shell input[type="number"],
.admin-shell input[type="date"],
.admin-shell input[type="search"],
.admin-shell input[type="tel"],
.admin-shell select,
.admin-shell textarea,
.admin-shell .trix-content,
.admin-shell trix-editor {
  border-color: rgb(var(--color-surface1));
  background-color: rgb(var(--color-surface0));
  color: rgb(var(--color-text));
  caret-color: rgb(var(--color-peach));
}

.admin-shell input[type="file"] {
  border-color: rgb(var(--color-surface1));
  background-color: rgb(var(--color-surface0));
  color: rgb(var(--color-subtext1));
}

.admin-shell input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  border: 0;
  border-radius: 9999px;
  background-color: rgb(var(--color-surface1));
  color: rgb(var(--color-text));
  padding: 0.4rem 0.8rem;
  font-weight: 700;
}

.admin-shell input[type="file"]::file-selector-button:hover {
  background-color: rgb(var(--color-surface2));
  color: rgb(var(--color-peach));
}

.admin-shell input::placeholder,
.admin-shell textarea::placeholder {
  color: rgb(var(--color-overlay1));
}

.admin-shell input:focus,
.admin-shell select:focus,
.admin-shell textarea:focus,
.admin-shell trix-editor:focus {
  border-color: rgb(var(--color-peach));
  box-shadow: 0 0 0 3px rgb(var(--color-peach) / 0.18);
  outline: none;
}

.admin-shell input[type="checkbox"],
.admin-shell input[type="radio"] {
  border-color: rgb(var(--color-surface2));
  background-color: rgb(var(--color-surface0));
  color: rgb(var(--color-peach));
}

.admin-shell input[type="checkbox"]:focus,
.admin-shell input[type="radio"]:focus {
  box-shadow: 0 0 0 3px rgb(var(--color-peach) / 0.18);
}

.admin-shell input:disabled,
.admin-shell select:disabled,
.admin-shell textarea:disabled {
  border-color: rgb(var(--color-surface0));
  background-color: rgb(var(--color-mantle));
  color: rgb(var(--color-overlay1));
  cursor: not-allowed;
}

.admin-shell input[type="submit"],
.admin-shell button[type="submit"] {
  border: 1px solid rgb(var(--color-peach) / 0.7);
  background-color: rgb(var(--color-peach));
  color: rgb(var(--color-crust));
  font-weight: 800;
}

.admin-shell input[type="submit"]:hover,
.admin-shell button[type="submit"]:hover {
  background-color: rgb(var(--color-yellow));
  border-color: rgb(var(--color-yellow));
}

.admin-shell trix-toolbar .trix-button-group,
.admin-shell trix-toolbar .trix-button {
  border-color: rgb(var(--color-surface1));
}

.admin-shell trix-toolbar .trix-button {
  background-color: rgb(var(--color-surface0));
  color: rgb(var(--color-subtext1));
}

.admin-shell trix-toolbar .trix-button.trix-active,
.admin-shell trix-toolbar .trix-button:hover {
  background-color: rgb(var(--color-surface1));
  color: rgb(var(--color-peach));
}

.admin-shell trix-toolbar .trix-dialog {
  border-color: rgb(var(--color-surface1));
  background-color: rgb(var(--color-mantle));
  color: rgb(var(--color-text));
}