/**
 * ==========================================================================
 * GLOBAL DESIGN SYSTEM — Safe tokens & resets
 * ==========================================================================
 *
 * PURPOSE:  Design tokens (colours, fonts, spacing) used site-wide.
 *           This file is safe to load on EVERY page — it contains NO
 *           layout rules, NO component styles, and NO selector overrides
 *           that could break existing pages.
 *
 * LOAD:     Enqueued unconditionally in functions.php
 * ==========================================================================
 */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* ---- Brand Colours ---- */
  --co-clarify:        #95C7A7;
  --co-radiance:       #DEBF8E;
  --co-protect:        #C99595;

  /* ---- UI Colours ---- */
  --co-cta:            #C98181; /* primary CTA — buttons, cart badge, checkout */
  --co-cta-dark:       #38322D; /* dark button/text variant */
  --co-cta-bg:         #F9F8F4; /* warm off-white page background */

  /* ---- Neutral Palette ---- */
  --co-dark:           #1a1a1a;
  --co-body:           #555555;
  --co-muted:          #777777;
  --co-light-text:     #888888;
  --co-subtle:         #aaaaaa;
  --co-border:         #e8e0d5;
  --co-bg-warm:        #faf8f5;
  --co-bg-white:       #ffffff;

  /* ---- Typography ---- */
  --ff-serif:          Georgia, "Times New Roman", serif;
  --ff-sans:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Spacing Scale ---- */
  --sp-xs:             8px;
  --sp-sm:             16px;
  --sp-md:             24px;
  --sp-lg:             40px;
  --sp-xl:             60px;
  --sp-2xl:            80px;
  --sp-section:        100px;

  /* ---- Max Widths ---- */
  --mw-narrow:         660px;
  --mw-content:        860px;
  --mw-wide:           1080px;

  /* ---- Transitions ---- */
  --ease-default:      0.3s ease;

  /* ---- Type Scale (change these to update font sizes site-wide) ---- */
  --fs-display:        clamp(36px, 4vw, 52px); /* hero/product titles */
  --fs-h1:             30px;                   /* section pre-titles, eyebrow headings */
  --fs-tagline:        27px;                   /* ACF tagline text below product title */
  --fs-h2:             20px;
  --fs-body:           16px;
  --fs-small:          14px;
  --fs-eyebrow:        11px;
}

/* --------------------------------------------------------------------------
   Typography Helpers  (opt-in via class — never applied globally)
   -------------------------------------------------------------------------- */
.co-serif  { font-family: var(--ff-serif); }
.co-sans   { font-family: var(--ff-sans); }

.co-italic { font-style: italic; }

/* .eyebrow / .co-eyebrow — H1-style heading used as a pre-title across the site */
.eyebrow,
.co-eyebrow {
  font-size: var(--fs-h1);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--co-dark);
  margin-bottom: var(--sp-sm);
  display: block;
}

/* --------------------------------------------------------------------------
   Product Colour Utilities  (applied via body class already on site)
   -------------------------------------------------------------------------- */
.product_cat-clarify  { --co-accent: var(--co-clarify);  }
.product_cat-radiance { --co-accent: var(--co-radiance); }
.product_cat-protect  { --co-accent: var(--co-protect);  }

/* Explicit highlight classes — use anywhere in content or Code modules */
.highlight-clarify  { color: var(--co-clarify);  }
.highlight-radiance { color: var(--co-radiance); }
.highlight-protect  { color: var(--co-protect);  }

/* Generic accent — uses whichever product colour is active via body class.
   Apply these as CSS classes on Divi sections/rows/modules (Advanced > CSS Class).
   No Divi layout settings need to change — the colour comes from the body class. */
.highlight-product       { color:            var(--co-accent); }
.product-accent-bg       { background-color: var(--co-accent); }
.product-accent-text     { color:            var(--co-accent); }
.product-accent-border   { border-color:     var(--co-accent); }