/* ============================================================
   tokens.css — Brand design tokens
   Extracted verbatim from the live Elementor/Astra globals on
   https://abs-olutepilates.co.uk (Astra "astglobalcolor*" palette
   + Elementor global typography). See README.md for provenance.
   ============================================================ */
:root {
  /* --- Brand colour palette (Astra globals) --- */
  --color-cream:        #f4f0e5; /* astglobalcolor0 — page background      */
  --color-teal:         #53a292; /* astglobalcolor1 — secondary accent     */
  --color-green-dark:   #205b4f; /* astglobalcolor2/6 — primary brand dark  */
  --color-grey:         #7f7c76; /* astglobalcolor3 — body text            */
  --color-light-teal:   #d9e8e5; /* astglobalcolor4 — soft tint            */
  --color-white:        #ffffff; /* astglobalcolor5                        */
  --color-offwhite:     #f6f5f4; /* astglobalcolor7 — alt section bg       */
  --color-border:       #e2e1df; /* astglobalcolor8 — hairlines            */

  /* --- Button / accent greens (from Elementor button widgets) --- */
  --color-sage:         #84b586; /* primary button background              */
  --color-sage-hover:   #98bb98;
  --color-sage-light:   #b9d8b9;
  --color-accent:       #84d6a5;

  /* --- Semantic roles --- */
  --bg-page:            var(--color-cream);
  --bg-dark:            var(--color-green-dark);
  --bg-alt:            var(--color-offwhite);
  --text-body:          var(--color-grey);
  --text-heading:       var(--color-green-dark);
  --text-on-dark:       var(--color-white);
  --link:               var(--color-green-dark);
  --link-hover:         var(--color-teal);
  --btn-bg:             var(--color-sage);
  --btn-bg-hover:       var(--color-green-dark);
  --btn-text:           var(--color-white);

  /* --- Typography (Elementor global fonts) --- */
  --font-heading: "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-body:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- Layout --- */
  --maxw: 1140px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 14px 40px rgba(32, 91, 79, 0.12);
  --shadow-sm: 0 6px 18px rgba(32, 91, 79, 0.10);
  --header-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}