/* ═══════════════════════════════════════════════════════════════════════════
   FINDMYSITE — base.css
   Design tokens · reset · shared primitives (buttons, form messages, toasts,
   focus states). Loaded on every page before landing.css and app.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — Night palette — */
  --night:      #0a1220;   /* deepest sky, page start */
  --night-2:    #101c30;   /* upper gradient stop */
  --indigo:     #1b2a4a;   /* pre-dawn sky */
  --dawn-rose:  #e8836b;   /* horizon blush */
  --dawn-peach: #ffb47e;   /* sunrise */
  --day-cream:  #faf6ef;   /* morning paper — light section bg */
  --day-warm:   #f4ead9;   /* warmer cream variant */

  /* — Brand — */
  --forest:     #1a3c2e;   /* primary brand green */
  --pine:       #0d2d1a;
  --ember:      #ff9e2c;   /* fire accent — primary CTA */
  --ember-deep: #e07b00;
  --amber:      #f59e0b;   /* legacy accent, hover states */

  /* — Ink — */
  --ink:        #16241d;   /* text on light */
  --ink-soft:   #4b5d52;
  --paper:      #ffffff;
  --mist:       #9fb0c4;   /* muted text on dark */
  --starlight:  #eef3fa;   /* bright text on dark */

  /* — Semantic — */
  --success:    #16a34a;  --success-bg: #ecfdf5;
  --danger:     #dc2626;  --danger-bg:  #fef2f2;
  --warn:       #b45309;  --warn-bg:    #fef3c7;

  /* — Geometry — */
  --radius-sm: 10px; --radius: 18px; --radius-lg: 28px;
  --shadow-sm: 0 1px 4px rgba(10,18,32,.07);
  --shadow:    0 6px 28px rgba(10,18,32,.10);
  --shadow-lg: 0 18px 60px rgba(10,18,32,.16);

  /* — Motion — */
  --ease: cubic-bezier(.16,1,.3,1);            /* expo-out: reveals, sweeps */
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* toasts, playful pops */
  --t-fast: .18s; --t-med: .45s; --t-slow: .8s;

  /* — Time-of-day engine — */
  --cin-day: 0;   /* 0..1, written by cinematic.js; reduced-motion pins 0.62 */
  --cin-ink:        color-mix(in oklab, var(--starlight) calc((1 - var(--cin-day)) * 100%), var(--ink));
  --cin-ink-strong: color-mix(in oklab, #ffffff calc((1 - var(--cin-day)) * 100%), var(--forest));
  --cin-ink-soft:   color-mix(in oklab, var(--mist) calc((1 - var(--cin-day)) * 100%), var(--ink-soft));

  /* — Typography — */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;

  /* — Legacy aliases (older inline styles + generated markup reference these) — */
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --muted: var(--ink-soft);
  --border: #e3e8e2;
  --amber-dark: var(--ember-deep);
}

@media (prefers-reduced-motion: reduce) {
  :root { --cin-day: 0.62; }   /* pin the sky at golden hour, no animation */
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
p { text-wrap: pretty; }
a { color: inherit; }
table { border-collapse: collapse; }
:target { scroll-margin-top: 5rem; }

/* THE most important rule in the file — the entire app show/hide system: */
.hidden { display: none !important; }

/* ── Focus ─────────────────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Layout helpers ────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Button family ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  padding: .8rem 1.5rem;
  border-radius: 12px;
  border: 1.5px solid transparent;
  text-decoration: none;
  color: var(--ink);
  background: #e9eee9;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--forest); color: var(--starlight); }
.btn-primary:hover { background: color-mix(in oklab, var(--forest) 82%, #ffffff); box-shadow: var(--shadow); }

.btn-amber {
  background: linear-gradient(180deg, var(--ember), var(--ember-deep));
  color: #2b1500;
  box-shadow: 0 6px 22px rgba(255,158,44,.32);
}
.btn-amber:hover { filter: brightness(1.07); box-shadow: 0 10px 30px rgba(255,158,44,.42); }

.btn-secondary { background: transparent; border-color: #ccd6cf; color: var(--ink); }
.btn-secondary:hover { border-color: var(--forest); }

.btn-success { background: var(--success); color: #ffffff; }
.btn-success:hover { background: color-mix(in oklab, var(--success) 86%, #ffffff); }

.btn-danger {
  background: var(--danger-bg);
  color: #b91c1c;
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--danger-bg)); }

.btn-sm { padding: .45rem .8rem; font-size: .8rem; border-radius: 9px; }

.btn-outline-light {
  background: transparent;
  border-color: color-mix(in srgb, var(--cin-ink) 42%, transparent);
  color: var(--cin-ink);
}
.btn-outline-light:hover { border-color: var(--cin-ink); }

/* Compact share button generated into watch rows by app.js */
.btn-share {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: transparent;
  border: 1.5px solid #ccd6cf;
  border-radius: 9px;
  padding: .45rem .7rem;
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-share:hover { border-color: var(--forest); color: var(--forest); }

/* ── Form messages (app.js sets className wholesale — both spellings used) ── */
.form-message {
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: .7rem .95rem;
  margin: .85rem 0;
  font-size: .875rem;
  line-height: 1.5;
}
.form-message-success, .form-message.success {
  background: var(--success-bg);
  color: #14532d;
  border-color: color-mix(in srgb, var(--success) 25%, transparent);
}
.form-message-error, .form-message.error {
  background: var(--danger-bg);
  color: #991b1b;
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}

/* ── Toasts (structural + semantic — shared by landing and app) ───────────── */
#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-width: min(430px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  pointer-events: auto;
  background: var(--night-2);
  color: var(--starlight);
  border-left: 4px solid var(--mist);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: .85rem 1rem;
  font-size: .9rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateX(18px);
  transition:
    opacity var(--t-med) var(--ease),
    transform var(--t-med) var(--ease-spring);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast a { color: var(--ember); font-weight: 600; }
.toast-success { border-left-color: var(--success); }
.toast-error   { border-left-color: var(--danger); }
.toast-info    { border-left-color: var(--ember); }
.toast-close {
  flex: 0 0 auto;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--mist);
  font-size: .85rem;
  line-height: 1;
  padding: .15rem;
  cursor: pointer;
}
.toast-close:hover { color: var(--starlight); }

@media (max-width: 640px) {
  #toast-container { left: 1rem; right: 1rem; max-width: none; }
  .toast { transform: translateY(-14px); }
  .toast.show { transform: translateY(0); }
}

/* ── Modal structure (safety net — app.css owns the full look and loads
      after this file, so its rules win; these keep modals functional) ──────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 18, 32, .55);
}
.modal-box {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: min(460px, calc(100vw - 2rem));
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.6rem;
}
.modal-close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--ink-soft);
  cursor: pointer;
  padding: .3rem;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .toast { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}