/* ═══════════════════════════════════════════════════════════════════
   MORGAN BOOK — BRAND TOKENS
   ───────────────────────────────────────────────────────────────────
   This is the ONLY file that carries brand values. Layout, components
   and WooCommerce styling all reference these variables and nothing
   else, so re-skinning the site means editing this file alone.

   COLOUR: sampled pixel-exact from the live morganbook.co.uk homepage.
   TYPE:   still [VERIFY] — the live stylesheet has not been read yet,
           so the families below are structural placeholders.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour ─────────────────────────────────────────────────────
     Sampled from the live site unless annotated otherwise.          */
  --ink:        #050A13;   /* hero / dark bands — sampled            */
  --ink-soft:   #232323;   /* heading ink on white — sampled         */
  --paper:      #FFFFFF;   /* page background — sampled              */
  --paper-warm: #F5F5F5;   /* light grey content field — sampled     */
  --line:       #E3E3E3;   /* hairlines, input borders               */

  /* Live body copy is #828282, which fails WCAG AA on white at
     3.84:1. Darkened to 5.33:1. This is a deliberate change from the
     live site — see README §10. */
  --muted:      #6B6B6B;

  --accent:     #8ECEDA;   /* primary CTA / icons — sampled          */
  --accent-alt: #2AABC4;   /* deep cyan, footer band end — sampled   */
  --accent-ink: #050A13;   /* text on --accent (live uses pure black)*/
  --alt-ink:    #050A13;   /* text on --accent-alt                   */

  --accent-blue: #1E73BE;  /* header Buy Now button — sampled from    */
                           /* the live site's CTA-band button         */
  --blue-ink:    #FFFFFF;  /* white on --accent-blue = 4.94:1, AA ok  */

  --focus:      #1D6FE0;   /* visible keyboard focus ring            */

  /* Footer gradient, sampled left-to-right across the live band. */
  --grad-from:  #80C9D7;
  --grad-to:    #2AABC4;

  /* Contrast — verified against the sampled palette:
       white on ink ............... 19.8:1  AA pass
       ink-soft on paper .......... 15.7:1  AA pass
       accent on ink .............. 11.3:1  AA pass
       ink on accent .............. 11.3:1  AA pass
       ink on accent-alt ........... 7.3:1  AA pass
       muted on paper .............. 5.3:1  AA pass
       accent as TEXT on paper ..... 1.8:1  AA FAIL
       white as TEXT on accent-alt . 2.7:1  AA FAIL
     ⚠ --accent is a fill and an icon colour, never body text on white.
     ⚠ Text over the footer gradient must be --ink, not white. The live
       site puts white there at 1.9:1 and it is effectively unreadable. */

  /* ── Typography ─────────────────────────────────────────────────
     Read from the live theme's enqueue function
     (livre/app/functions/function-assets.php → livre_fonts_url()).
     The Livre theme loads exactly two Google families and no others:
       Open Sans        300, 400, 500, 600
       Playfair Display 100, 100i, 400, 400i, 700
     Headings render in the serif, body in the sans.                 */
  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-accent:  var(--f-display);

  /* Two heading weights, matching the live site:
       banner and hero titles ..... Playfair Display 400 (regular)
       section headings ........... Playfair Display 700 (bold)
     Getting this wrong makes the whole page read heavier than the
     original, which is exactly what happened in 2.0.0. */
  --fw-display: 400;
  --fw-head:    700;
  --fw-body:    400;
  --fw-bold:    600;
  --fw-heavy:   700;

  /* Fluid type scale */
  --t-hero:  clamp(2.2rem, 4.3vw, 3.7rem); /* ~59px, matches live */
  --t-h1:    clamp(2.2rem, 4.6vw, 3.6rem);
  --t-h2:    clamp(1.6rem, 2.6vw, 2.1rem);
  --t-h3:    clamp(1.15rem, 1.6vw, 1.35rem);
  --t-lead:  clamp(1.02rem, 1.4vw, 1.18rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.6;

  --ls-display: 0.005em;
  --ls-caps:    0.1em;

  /* ── Space scale (4px base) ─────────────────────────────────── */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --sec-pad: clamp(3.5rem, 7vw, 6rem);

  /* ── Layout ─────────────────────────────────────────────────── */
  --wrap:        1180px;
  --wrap-narrow: 760px;
  --wrap-wide:   1320px;
  --gutter:      clamp(1.25rem, 4vw, 2rem);
  --header-h:    84px;
  --header-h-sm: 66px;

  /* ── Radius, shadow, motion ─────────────────────────────────── */
  --r-sm: 4px;  --r-md: 12px;  --r-lg: 22px;  --r-pill: 980px;

  --sh-1: 0 4px 12px rgba(1, 5, 12, .08);
  --sh-2: 0 10px 26px rgba(1, 5, 12, .10);
  --sh-3: 0 16px 36px rgba(1, 5, 12, .18);

  --dur-fast: .15s;
  --dur:      .25s;
  --dur-slow: .4s;
  --ease:     cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}