/*
 * PuntaCanaSelect.com — design tokens
 *
 * Source of truth for the visual redesign, per the Master Design
 * Transformation Charter. Colors verified 2026-07-26 against the actual
 * logo file (puntacana_select_primary_logo_transparent.png, media 1635) —
 * not the superseded #005F8E/#D4A843/#2E7D52 palette formerly documented
 * in CLAUDE.md, which does not match the real logo.
 *
 * ---------------------------------------------------------------------
 * RECONCILED 2026-08-04 — read this before changing any value below.
 *
 * This file previously disagreed with the values the live site actually
 * renders. The page-level mu-plugins (pcs-homepage-redesign.php and
 * siblings) declare their own :root tokens inline, and because those
 * <style> blocks come later in the document than this linked stylesheet,
 * they win at equal specificity. Three names disagreed:
 *
 *     --pcs-border   this file #E4DED3   live #DDE5EA
 *     --pcs-error    this file #B3261E   live #C6402E
 *     --pcs-sand     this file #F4E7D1   live #F4EFE1
 *
 * The owner ruled the LIVE values canonical, so they are used below. The
 * Charter values are recorded in this comment rather than deleted, so the
 * divergence is not silently lost.
 *
 * Seven names that the mu-plugins define and consume were missing here
 * entirely; they are added below with the live values, so this file now
 * describes the site rather than competing with it.
 *
 * Every value below was read from the live production CSS, not assumed.
 * ---------------------------------------------------------------------
 */

:root {

  /* ---- Raw palette --------------------------------------------------- */
  --pcs-navy:        #0A2E4D;
  --pcs-blue:        #0D6E8C;
  --pcs-turquoise:   #18B7B2;
  --pcs-ivory:       #FBF8F2;
  --pcs-white:       #FFFFFF;
  --pcs-sand:        #F4EFE1;   /* live canonical (Charter value was #F4E7D1) */
  --pcs-amber:       #C97824;
  --pcs-success:     #166534;
  --pcs-error:       #C6402E;   /* live canonical (Charter value was #B3261E) */
  --pcs-text:        #1E2933;
  --pcs-muted:       #61707C;
  --pcs-border:      #DDE5EA;   /* live canonical (Charter value was #E4DED3) */

  /* ---- Names the page mu-plugins already define and consume ----------
   * Added 2026-08-04 so this file matches the rendered site. Values copied
   * from pcs-homepage-redesign.php's own :root block, which is what the
   * homepage, About Us and Contact actually use today. --pcs-body and
   * --pcs-secondary are the same colours as --pcs-text and --pcs-muted;
   * both spellings are kept because both are referenced in live CSS.
   */
  --pcs-body:        #1E2933;
  --pcs-secondary:   #61707C;
  --pcs-offwhite:    #F7F9F8;
  --pcs-whatsapp:    #25D366;   /* WhatsApp brand green — only for WhatsApp affordances */
  --pcs-shadow:      0 8px 24px rgba(8, 52, 76, 0.08);
  --pcs-font-body:    'Inter', sans-serif;
  --pcs-font-heading: 'Manrope', sans-serif;

  /* ---- Semantic aliases ----------------------------------------------
   * Templates should reference these, not the raw palette above, so the
   * *role* a color plays (primary action, selected state, success) stays
   * fixed even if the underlying hex is refined later.
   */
  --color-bg-page:        var(--pcs-ivory);
  --color-bg-surface:     var(--pcs-white);
  --color-bg-sand:        var(--pcs-sand);
  --color-text:           var(--pcs-text);
  --color-text-muted:     var(--pcs-muted);
  --color-border:         var(--pcs-border);

  --color-primary-cta:    var(--pcs-amber);   /* the one dominant booking action color, per Charter */
  --color-secondary:      var(--pcs-navy);    /* secondary actions / deep brand anchor */
  --color-link:           var(--pcs-blue);
  --color-selected:       var(--pcs-turquoise); /* interactive / selected state only */

  /* Success is scoped strictly to confirmed/success states — never used
   * decoratively. The logo has no green in it, so nothing should imply
   * one exists as a branding color. */
  --color-success:        var(--pcs-success);
  /* #C6402E measures ~5.0:1 on white — passes WCAG AA for normal text.
   * (The previous ~6.5:1 note described the superseded #B3261E.) */
  --color-error:          var(--pcs-error);
  --color-warning:        var(--pcs-amber);

  /* Gold-adjacent decorative accent — per the ResortLux addendum, gold is
   * restricted to SMALL premium accents only: fine dividers, section
   * eyebrows, select icons, limited premium highlights. It must never be
   * used for a button, link, badge, or selected state — the primary CTA
   * is --pcs-amber, not gold. No separate saturated "gold" hex is
   * introduced here; this aliases the already-approved --pcs-sand rather
   * than adding an unverified new brand color. Deliberately NOT added to
   * Elementor's system_colors or custom_colors globals (checked 2026-07-26:
   * neither currently exposes any gold-family color either) — kept out of
   * the picker so it can't get applied decoratively by accident as more
   * of the site gets rebuilt. */

  /* ---- Typography ------------------------------------------------------
   * Editorial serif for major headings only. Manrope everywhere
   * transactional — nav, body, forms, cards, pricing, booking controls,
   * cart, checkout. Never serif inside a transactional control.
   * Both families are already loading somewhere on the live site today
   * (confirmed in the Prompt 0 audit) — this phase does not add a new
   * font-loading mechanism, only names the approved pairing.
   *
   * NOTE the deliberate split: --font-body is the Charter's transactional
   * family (Manrope) and is what new work should use. --pcs-font-body is
   * what the existing page mu-plugins actually render (Inter). They are
   * different on purpose; unifying them is a content decision, not a
   * token cleanup, and would restyle live pages.
   */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;

  --type-scale-ratio: 1.25;
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-md:   1.15rem;
  --text-lg:   1.4rem;
  --text-xl:   1.9rem;
  --text-2xl:  2.4rem;
  --text-3xl:  3rem;

  /* ---- Shape ------------------------------------------------------- */
  --radius-image:  14px;
  --radius-card:   14px;
  --radius-panel:  16px;
  --radius-button: 9px;
  --radius-control: 9px;

  /* ---- Spacing scale (4px base grid) -------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Section padding presets: exploration pages get generous editorial
   * spacing, transactional pages (cart/checkout/booking) stay denser. */
  --section-padding-editorial: var(--space-8) var(--space-4);
  --section-padding-transactional: var(--space-5) var(--space-4);
}