/* ============================================================
   MEROVA — design tokens
   MerovaBooks.com · dark voyage theme (dark is the default and
   only theme; `color-scheme: dark` keeps native UI in key).

   Color jobs (do not reassign):
   - Navy field      = the sky. Backgrounds only.
   - Mist blue       = navigation, hairlines, the route, secondary text.
   - Lantern gold    = warmth and invitation: CTAs, sails, small accents.
                       At most one large gold element per screen.
   - Starlight       = headings and emphasis. Never tinted gold in body.
   Palette anchors come from the locked cover: #1A2433 / #A9BFD6.
   ============================================================ */

:root {
  color-scheme: dark;

  /* --- sky (backgrounds; page steps BACK, panels lift) --- */
  --ink-deep:   #070C14;   /* page floor */
  --ink:        #0A111C;   /* page background */
  --field:      #1A2433;   /* cover navy — panels, nav */
  --field-raise:#222E41;   /* raised panel / hover */

  /* --- light --- */
  --starlight:  #EDF2F9;   /* headings, strongest text */
  --text:       #C7D2E2;   /* body */
  --mist:       #A9BFD6;   /* cover pale blue — secondary text, lines */
  --mist-dim:   #7B8FA9;   /* captions, metadata (AA on --ink at 16px+) */

  /* --- lantern gold --- */
  --gold:        #D9A863;
  --gold-bright: #EFC98A;
  --gold-deep:   #A97E3F;
  --gold-soft:   color-mix(in srgb, var(--gold) 16%, transparent);

  /* --- derived tints (color-mix does the theming work) --- */
  --panel:        color-mix(in srgb, var(--field) 86%, var(--ink));
  --panel-border: color-mix(in srgb, var(--mist) 16%, transparent);
  --panel-border-hi: color-mix(in srgb, var(--gold) 28%, transparent);
  --hairline:     color-mix(in srgb, var(--mist) 22%, transparent);
  --glow-blue:    color-mix(in srgb, var(--mist) 12%, transparent);

  /* --- type --- */
  --f-display: "Cinzel", "Trajan Pro", serif;
  --f-body: "EB Garamond", Georgia, "Times New Roman", serif;
  --fs-body: 1.1875rem;         /* 19px */
  --lh-body: 1.68;
  --track-label: 0.22em;        /* uppercase eyebrow tracking */

  /* --- shape & depth --- */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-ambient: 0 1.1rem 2.4rem -1.1rem rgba(3, 8, 18, 0.85);
  --shadow-lift:    0 1.6rem 3.2rem -1.2rem rgba(3, 8, 18, 0.95);

  /* --- layout --- */
  --container: 1100px;
  --gutter: clamp(20px, 4vw, 40px);
  /* The fixed header's real height, MEASURED by js/site.js on every resize
     and written back here. Three things used to hardcode it and disagree:
     `scroll-margin-top: 78px`, `NAV_H = 78` in the glide, and the portrait
     hero's `margin-top: 74px`. They were all correct for one viewport and
     wrong for the rest — a wrapped nav or a phone's shorter bar moved the
     real number to 58-96px. The value below is the desktop measurement and
     is only ever the FALLBACK, for the first paint and for scripting off. */
  --header-h: 68px;
  /* Notch / rounded-corner insets. Zero everywhere they do not exist, so
     they are safe to add into any padding unconditionally. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* --- motion --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration: 0.9s;
}