/*
 * PourSlate design foundation: tokens, type, buttons, forms, badges.
 * Shared by the marketing site, the dashboard and the auth pages.
 * (Customer-facing menus -- public.css and tv.css -- use the business's own
 * brand colors instead.)
 */

:root {
  /* Warm cream */
  --cream-50: #fffdf8;
  --cream-100: #fbf5ea;
  --cream-200: #f4eadb;
  --cream-300: #e8dac3;
  /* Deep teal */
  --teal-950: #082c2e;
  --teal-900: #0c3b3d;
  --teal-800: #0f4b4c;
  --teal-700: #11605f;
  --teal-600: #167572;
  --teal-200: #a9d6cf;
  --teal-100: #d6ece8;
  --teal-50: #eaf5f2;
  /* Coral (accents only) */
  --coral-300: #f9a68e;
  --coral-500: #ee6a4b;
  --coral-700: #b8431f;
  --coral-100: #fce3da;
  /* Charcoal text */
  --ink: #1e2327;
  --ink-soft: #4b535c;
  --ink-muted: #646b73;

  --ok: #1e6b45;
  --ok-bg: #e3f3e9;
  --warn: #8a4b00;
  --warn-bg: #fcefd6;
  --danger: #b3261e;
  --danger-bg: #fdecea;

  --bg: var(--cream-100);
  --surface: var(--cream-50);
  --line: #e6dac6;
  --line-strong: #d5c4a8;
  --accent: var(--teal-700);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(58, 42, 20, 0.06);
  --shadow: 0 1px 2px rgba(58, 42, 20, 0.05), 0 4px 14px rgba(58, 42, 20, 0.06);
  --shadow-lg: 0 24px 60px rgba(12, 35, 36, 0.22);
  --focus: 0 0 0 3px var(--cream-50), 0 0 0 5px var(--teal-600);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--teal-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal-900); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.4em; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--teal-900); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Brand mark ---------- */

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark:hover { color: var(--ink); }
.brand-mark .brand-icon { width: 30px; height: 30px; flex-shrink: 0; }
.brand-mark em { font-style: normal; color: var(--coral-700); }
.brand-icon .bi-screen, .brand-icon .bi-stand { fill: var(--teal-900); }
.brand-icon .bi-line { fill: var(--cream-100); }
.brand-icon .bi-line2 { fill: var(--teal-200); }
.brand-icon .bi-dot { fill: var(--coral-500); }
.on-dark .brand-mark, .brand-mark.on-dark { color: var(--cream-100); }
.on-dark .brand-mark em, .brand-mark.on-dark em { color: var(--coral-300); }
.on-dark .brand-icon .bi-screen, .on-dark .brand-icon .bi-stand { fill: var(--cream-100); }
.on-dark .brand-icon .bi-line { fill: var(--teal-900); }
.on-dark .brand-icon .bi-line2 { fill: var(--teal-600); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: 600 0.92rem/1.2 var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--cream-200); border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.btn:focus-visible { box-shadow: var(--focus); border-radius: var(--r-sm); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.btn-primary:hover { background: var(--teal-900); border-color: var(--teal-900); color: #fff; }

.btn-accent { background: var(--coral-500); border-color: var(--coral-500); color: var(--ink); }
.btn-accent:hover { background: #f27f63; border-color: #f27f63; color: var(--ink); }

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--cream-200); border-color: transparent; }

.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); border-color: #efb9b3; color: var(--danger); }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #8f1d17; border-color: #8f1d17; color: #fff; }

.btn-sm { min-height: 34px; padding: 5px 12px; font-size: 0.85rem; }
.btn-lg { min-height: 50px; padding: 12px 24px; font-size: 1rem; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-icon { min-width: 34px; padding: 5px 8px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-plain::before { display: none; }
.badge-live { background: var(--ok-bg); color: var(--ok); }
.badge-draft { background: var(--cream-200); color: var(--ink-soft); }
.badge-changes { background: var(--warn-bg); color: var(--warn); }
.badge-sold-out { background: var(--danger-bg); color: var(--danger); }
.badge-hidden { background: var(--cream-200); color: var(--ink-soft); }

/* ---------- Forms ---------- */

form .field { margin-bottom: 18px; }
label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; color: var(--ink); }
.help-text { color: var(--ink-muted); font-size: 0.82rem; margin-top: 5px; line-height: 1.45; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"],
textarea, select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font: 400 0.95rem/1.4 var(--font-ui);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { min-height: 84px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #8b9097; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(22, 117, 114, 0.22); }
input[type="color"] { width: 56px; height: 42px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--teal-700); width: 17px; height: 17px; }
.errorlist { list-style: none; padding: 0; margin: 6px 0 0; color: var(--danger); font-size: 0.84rem; font-weight: 500; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger); }

/* ---------- Switch (a styled checkbox; label text stays constant) ---------- */

.switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 0.85rem; cursor: pointer; position: relative; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--cream-300); transition: background-color 0.15s; flex-shrink: 0; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.switch input:checked + .switch-track { background: #c73e1d; }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--focus); }

/* ---------- Messages ---------- */

.messages { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.messages li {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
.messages .success { background: var(--ok-bg); border-color: #b9e0c8; color: var(--ok); }
.messages .error { background: var(--danger-bg); border-color: #f3c2be; color: var(--danger); }
.messages .info { background: var(--teal-50); border-color: var(--teal-100); color: var(--teal-800); }
.messages .warning { background: var(--warn-bg); border-color: #f0d7a4; color: var(--warn); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}