/* =============================================================================
   drafts.css  —  the 16 staged draft pages only
   -----------------------------------------------------------------------------
   Linked by _src/render.php, and by nothing else: the 24 real-site routes under
   /_preview/{en,es}/{cyprus,dubai}/ already inherit the live site's stylesheets
   and must not be touched by anything in here.

   The drafts were authored separately, at different times, and drifted:

       ivory ground   #FBF8F2  #FBF8F3  #FAF7F0  #FBF8F1
       ink            #1C2620  #1A1A1A  #1A241F  #1C231F  #1B231F  #1E2420
       body font      six different Carlito/Caladea fallback stacks
       button radius  3px  4px  6px  8px
       token names    two rival schemes, --ivory/--ink and --pmg-ivory/--pmg-ink

   Nobody would notice any single one, but put two drafts side by side and they
   read as two different companies. This file settles each value once, under both
   naming schemes, so a draft picks up the unified value whichever it happens to
   reference.

   HOW IT WINS
   Load order, not force. render.php injects this link LAST in <head>, after the
   draft's own <style> block, so an identical-specificity :root here overrides
   the draft's :root without a single !important. Nothing below reaches inside
   #pmg-bar / #pmg-disc / #header — the shared header owns those (chrome.css),
   and this file must never restyle it.
   ============================================================================= */

/* ---- page ground ----------------------------------------------------------
   Nine of the sixteen drafts never reset the body margin, so the browser's
   default 8px showed as a pale strip above and beside the dark header — the
   "broken header" on those pages.
   -------------------------------------------------------------------------- */
html, body { margin: 0; padding: 0; }

/* ---- the settled tokens ---------------------------------------------------
   Both naming schemes get the same value. Greens are the live site's: #0b3e27
   deep and #127749 mid.
   -------------------------------------------------------------------------- */
body.pv-draft {
  --ivory:       #faf7f0;   --pmg-ivory:      #faf7f0;
  --ink:         #1a241f;   --pmg-ink:        #1a241f;
  --text:        #1a241f;
  --green:       #0b3e27;   --pmg-green:      #0b3e27;
  --green-deep:  #0b3e27;   --pmg-green-deep: #0b3e27;
  --green-mid:   #127749;

  --r-btn:   4px;
  --r-card:  8px;
  --r-input: 5px;
}

/* ---- typography -----------------------------------------------------------
   Open Sans, because that is what site.css imposes on the whole domain — the
   real routes are already Open Sans, and a draft in Carlito next to them looks
   like a different site.

   The icon exclusions belong in THIS selector and not in a follow-up rule: a
   later `i { font-family: inherit }` inherits Open Sans and turns every Font
   Awesome social glyph into an empty box.
   -------------------------------------------------------------------------- */
body.pv-draft,
body.pv-draft *:not(i):not([class*="fa-"]):not([class*="flag-icon"]) {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

/* ---- one button radius ----------------------------------------------------
   Scoped to the drafts' own button classes. The header's button is .pv-cta and
   its dropdown is .pv-drop, neither of which is matched here — an earlier
   attempt to keep this out of the header with `border-radius: revert` on
   `#header *` is what made the language pill square on every draft: `revert` in
   an author stylesheet reverts to the BROWSER default (0), not to the rule in
   components/header.css that makes the pill 8px.
   -------------------------------------------------------------------------- */
body.pv-draft .btn,
body.pv-draft .cta,
body.pv-draft a.btn,
body.pv-draft button.btn,
body.pv-draft .button { border-radius: var(--r-btn); }
