/* Shared by the livery pages (/liveries/ home and the editor, paint.html): tokens, form controls,
   buttons, spinner, status and toast. Each page adds its own sheet (home.css, paint.css). */

:root {
  --lv-bg: #05070a;
  --lv-panel: #0c1119;
  --lv-line: rgba(243, 245, 248, .12);
  --lv-ink: #f3f5f8;
  --lv-ink2: #c2c6ce;
  --lv-ink3: #999aa0;
  --lv-green: #1ae566;
  --lv-red: #ff5563;
  /* Native controls (the open <select> list, the file dialog chrome) follow the dark page. */
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--lv-bg);
  color: var(--lv-ink2);
  font: 400 15px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: #5fc8ff; }
b { color: var(--lv-ink); }

.brand { display: flex; align-items: center; gap: 10px; color: var(--lv-ink); text-decoration: none; font-weight: 700; }

h1 { margin: 0 0 8px; font: 700 22px/1.2 var(--font-sans); color: var(--lv-ink); }

label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--lv-ink2); }
label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; font-size: 14px; }
select, input:not([type=checkbox]) {
  font: 400 15px/1.3 var(--font-sans); color: var(--lv-ink);
  background: rgba(243, 245, 248, .05); border: 1px solid var(--lv-line); border-radius: 10px;
  padding: 10px 12px; min-height: 42px;
}
/* The open list is drawn by the OS: give its rows explicit colours too, so the near-white text
   never lands on a white list (browsers that ignore color-scheme for it). */
select option { background: var(--lv-panel); color: var(--lv-ink); }
select:focus, input:focus { outline: 2px solid #5fc8ff; outline-offset: 2px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--lv-green); }

.status { margin: 0; min-height: 1.4em; font-size: 14px; }
.status.bad { color: var(--lv-red); }
.status.good { color: var(--lv-green); }

button, a.button { font: 700 14px/1 var(--font-sans); cursor: pointer; border-radius: 22px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button.primary, a.button.primary { align-self: flex-start; padding: 13px 30px; border: none; background: var(--lv-ink); color: #05070a; }
button.primary:hover:not(:disabled), a.button.primary:hover { background: #fff; }
button.primary:disabled { opacity: .35; cursor: default; }
button.ghost, a.button.ghost { padding: 8px 14px; border: 1px solid var(--lv-line); background: transparent; color: var(--lv-ink2); }
button.ghost:hover, a.button.ghost:hover { border-color: rgba(243, 245, 248, .35); color: var(--lv-ink); }
button.danger { color: var(--lv-red); border-color: rgba(255, 85, 99, .45); }
button.link { border: none; background: none; color: var(--lv-ink3); padding: 4px; font-weight: 600; }
button.link:hover { color: var(--lv-ink); }

.spinner { width: 28px; height: 28px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid rgba(243, 245, 248, .15); border-top-color: var(--lv-green); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #121924; color: var(--lv-ink); border: 1px solid var(--lv-line); border-radius: 10px;
  padding: 12px 18px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); max-width: calc(100vw - 32px);
}
.toast-action { margin-left: 10px; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--lv-green); background: transparent; color: var(--lv-green); font: inherit; cursor: pointer; }
.toast-action:hover { background: var(--lv-green); color: #05070a; }