/* Elizabeth Dean Coaching — the one place her colours are defined.
 *
 * Palette: "Mystic Waters + deep red", chosen by Lizzie on 2026-08-25 from the
 * three collections in the /preview mockup. The two darks are hers verbatim
 * from the Coolors link she sent; the deep red is the accent she asked to see
 * alongside them.
 *
 * Every colour here has been contrast-audited against WCAG AA (4.5:1 for body
 * text, 3:1 for large text) in both themes, on every ground it can land on.
 * Re-run that audit if you touch a value: the first pass found 18 real
 * failures, none of which were visible by eye.
 */

:root {
  --deep: #0b3948;              /* her Mystic Waters dark */
  --mid: #416165;               /* her Mystic Waters teal */
  --accent: #8a2b3d;            /* the deep red */

  --wall: #e9ecec;
  --paper: #f7f9f9;
  --line: #c5cdcf;
  --line-soft: #d9dfe0;
  --ink: #1f2b2f;
  --ink-soft: #4a5a5e;
  --ink-faint: #576669;

  /* Three role tokens that exist because the raw colours are unsafe in these
     specific jobs. Do not collapse them back into --mid / --accent. */
  --mid-text: var(--mid);       /* the teal as TEXT, not as a ground */
  --accent-band: var(--accent); /* the accent as a WHOLE SECTION */
  --on-accent: #ffffff;         /* ink that sits on the accent */

  --heading: var(--deep);
  --btn-bg: var(--accent);
  --btn-ink: var(--on-accent);
  --btn-edge: #6f2231;

  --accent-ink: #6f2231;
  --accent-wash: #8a2b3d12;
  --danger: #9a2c2c;
  --ok: #3d6b4a;
  --shadow: 0 1px 2px rgba(11, 57, 72, 0.06), 0 8px 24px rgba(11, 57, 72, 0.06);

  --radius-card: 6px;
  --radius-control: 4px;
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Two copies of the dark values on purpose: the media query serves the
   "system" default, the attribute lets a toggle override it in either
   direction. A single block cannot do both. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --deep: #0f4456;
    --mid: #3f686d;
    --accent: #c04a60;

    --wall: #101a1e;
    --paper: #1b262c;
    --line: #35444b;
    --line-soft: #28353c;
    --ink: #dfe5e5;
    --ink-soft: #a4b1b4;
    --ink-faint: #808d90;

    --mid-text: #93bec3;
    --accent-band: #8e3548;
    --on-accent: #ffffff;

    --heading: #a5c8d4;
    --btn-bg: #ce6178;
    --btn-ink: #14191c;
    --btn-edge: #e08d9d;

    --accent-ink: #e08d9d;
    --accent-wash: #ce617820;
    --danger: #e07979;
    --ok: #7fb08d;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
  }
}

:root[data-theme="dark"] {
  --deep: #0f4456;
  --mid: #3f686d;
  --accent: #c04a60;

  --wall: #101a1e;
  --paper: #1b262c;
  --line: #35444b;
  --line-soft: #28353c;
  --ink: #dfe5e5;
  --ink-soft: #a4b1b4;
  --ink-faint: #808d90;

  --mid-text: #93bec3;
  --accent-band: #8e3548;
  --on-accent: #ffffff;

  --heading: #a5c8d4;
  --btn-bg: #ce6178;
  --btn-ink: #14191c;
  --btn-edge: #e08d9d;

  --accent-ink: #e08d9d;
  --accent-wash: #ce617820;
  --danger: #e07979;
  --ok: #7fb08d;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
}

/* Base rules every page shares. Page-specific styling stays with its page. */
* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--sans);
  font-size: 16px;
  background: var(--wall);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-wash); color: var(--ink); }

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--wall); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

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

/* Cross-document view transition, matching main.css, so the booking page is
   not the one hard cut on the site's primary conversion path. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 300ms cubic-bezier(.4,0,.2,1) both; }
  ::view-transition-new(root) { animation: vt-in 480ms 90ms cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(28px); } }