/* ============================================================================
   PayLess Publishing — Design tokens
   ----------------------------------------------------------------------------
   The palette is taken from the CURRENT LOGO (new-logos/PayLess_Publishing_Logo.png),
   measured with _tools/assets-build/extract-logo-palette.mjs. The client asked
   for the site to move in line with the logo and away from brown/orange tints,
   so there is deliberately no brown anywhere in this file.

   Logo colour census (% of the opaque artwork):
     blue  #001434-#003070   22.2%   deep navy — the structural dark
     black #000000           20.1%   line work
     pink  #F030C0-#F860D0   19.0%   hot magenta accent
     orange #F8A878          13.4%   warm highlight (used sparingly)
     teal  #00A8F8-#00D8F8    8.2%   electric cyan — the primary action colour
     yellow #F8F0C0           3.8%   pale highlight
   ========================================================================= */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  /* Primary action colour: the logo's electric cyan. */
  --cyan:         #00A8F8;
  --cyan-deep:    #0090DC;
  --cyan-dark:    #006FAE;
  --cyan-soft:    #D6F1FF;
  --cyan-tint:    #ECF9FF;

  /* Secondary accent: the logo's hot magenta. */
  --magenta:      #F030C0;
  --magenta-deep: #D31AA2;
  --magenta-dark: #A30D7B;
  --magenta-soft: #FDE0F5;
  --magenta-tint: #FEF0FB;

  /* Warm highlight, borrowed from the logo's orange. Used sparingly — a busy
     page of cyan + magenta + orange reads cheap, so this is for small marks. */
  --sun:          #F8A878;
  --sun-deep:     #E8863F;
  --sun-soft:     #FFEDE0;

  /* ---- Structure / ink --------------------------------------------------- */
  /* Near-black, but COOL rather than warm. The previous ink was a red-leaning
     brown-black, and that warm cast was a large part of the "brown tinge" the
     client asked to remove. Here blue is the strongest channel. */
  --ink:          #101828;
  --ink-2:        #1B2438;

  /* Deep navy straight out of the logo. All dark surfaces use this. */
  --navy:         #001434;
  --navy-2:       #001F4C;
  --navy-3:       #003070;

  /* ---- Surfaces ---------------------------------------------------------- */
  /* Page background: a clean cool white. Not cream, not peach — both read
     "vanilla/brown" at large areas. */
  --cream:        #FCFDFF;
  --cream-2:      #F2F7FC;
  --cream-3:      #E8F0F8;

  --paper:        #FFFFFF;

  /* Pastel section bands. Cool ones lead; the warm pair at the end is used
     sparingly so the page never tips back into beige. */
  --sky-soft:     #E4F4FF;
  --mint-soft:    #E2F7F0;
  --pink-soft:    #FDE8F6;
  --lilac-soft:   #EDE9FF;
  --peach-soft:   #FFF1E8;
  --yellow-soft:  #FFF8DD;

  /* ---- Text -------------------------------------------------------------- */
  --text:         #1B2438;
  --text-soft:    #55617A;
  --text-mute:    #8A93A6;
  --text-on-dark: #F4F9FF;
  --text-on-dark-soft: #BFD4EA;

  --line:         #E1E9F2;
  --line-strong:  #C7D5E5;

  /* ---- Accents ----------------------------------------------------------- */
  --sky:          #0072CE;   /* readable blue for links */
  --sky-bright:   #00A8F8;
  --sky-tint:     #E4F4FF;

  --leaf:         #12A67A;
  --leaf-soft:    #E2F7F0;

  --grape:        #7A4FE0;
  --grape-soft:   #EDE9FF;

  --pink:         #F030C0;
  --pink-tint:    #FDE8F6;

  --ok:           #12A67A;
  --ok-soft:      #E2F7F0;
  --warn:         #C07A00;
  --warn-soft:    #FFF6DF;
  --err:          #E03131;
  --err-soft:     #FDEAEA;

  /* ---- Shape ------------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-full: 999px;

  /* Cool, soft shadows — the old warm-brown shadows were part of the sepia feel. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 3px 10px rgba(16, 24, 40, .05);
  --shadow-md: 0 6px 14px rgba(16, 24, 40, .07), 0 14px 34px rgba(16, 24, 40, .07);
  --shadow-lg: 0 14px 34px rgba(16, 24, 40, .11), 0 32px 70px rgba(16, 24, 40, .10);
  --shadow-cyan: 0 10px 26px rgba(0, 168, 248, .34);
  --shadow-magenta: 0 10px 26px rgba(240, 48, 192, .30);

  /* ---- Backwards-compatible aliases ------------------------------------- */
  /* ------------------------------------------------------------------------
     The classes and stylesheets written earlier refer to --coral, --amber and
     --plum by name (about 80 places: buttons, pills, eyebrows, cards). Those
     names described the OLD warm palette. Rather than edit every call site and
     risk missing one, they are mapped here onto the new cyan/magenta/navy
     palette. Change a colour in ONE place above and the whole site follows.

     If you add new CSS, prefer the real names: --cyan, --magenta, --navy.
     ------------------------------------------------------------------------ */
  --coral:        var(--cyan);          /* was the orange-red primary */
  --coral-deep:   var(--cyan-deep);
  --coral-dark:   var(--cyan-dark);
  --coral-soft:   var(--cyan-soft);
  --coral-tint:   var(--cyan-tint);

  --amber:        var(--magenta);       /* was the yellow secondary */
  --amber-deep:   var(--magenta-deep);
  --amber-soft:   var(--magenta-soft);

  --plum:         var(--navy);          /* was the dark band */
  --plum-2:       var(--navy-2);

  --shadow-coral: var(--shadow-cyan);   /* was the orange button glow */

  /* ---- Type -------------------------------------------------------------- */
  /* Baloo 2 is self-hosted (see css/fonts.css) so it works offline.
     "Comic Sans MS" is deliberately NOT in this stack: it was the silent
     fallback when Baloo 2 failed to load, and it made the site look homemade. */
  --font-display: "Baloo 2", "Segoe UI Variable Display", "Segoe UI",
                  system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Cascadia Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.55rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.6rem;
  --fs-4xl:  3.4rem;
  --fs-5xl:  4.4rem;

  /* ---- Space ------------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;

  --maxw: 1180px;
  --maxw-narrow: 760px;
  --header-h: 74px;

  --ease: cubic-bezier(.22, .68, .32, 1);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.14;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, var(--fs-4xl)); }
h2 { font-size: clamp(1.7rem, 3.6vw, var(--fs-3xl)); }
h3 { font-size: clamp(1.25rem, 2.2vw, var(--fs-xl)); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--sky); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--coral-deep); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.3em; }
li { margin-bottom: var(--sp-2); }

strong { font-weight: 700; color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 4px; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--plum); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--r-md) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }