/* ==========================================================================
   WSH Alohana — Design Tokens
   Single source of truth for colors, typography, and spacing.
   Change values here to restyle the entire plugin.
   Last synced with approved Style Guide: 2026-04-20

   IMPORTANT: Do not hardcode colors, fonts, or section padding in any other
   CSS file. Reference these tokens via var(--wsh-*) in component styles.
   ========================================================================== */

:root {
  /* ----- Color Palette ----- */
  --wsh-color-green:        #7b8e6e;   /* Primary accent — buttons, links, badges */
  --wsh-color-green-dark:   #5e6f53;   /* Hover/pressed state for primary accent */
  --wsh-color-green-rgb:    123, 142, 110;  /* RGB components for rgba() usage */
  --wsh-color-dark:         #011820;   /* Headings, dark backgrounds, footer */
  --wsh-color-grey:         #656565;   /* Secondary body text, muted labels */
  --wsh-color-sky:          #eaf9fe;   /* Soft section backgrounds, card glow rings */
  --wsh-color-white:        #ffffff;   /* Card backgrounds, button text */

  /* ----- Typography ----- */
  --wsh-font-heading:       'Poppins', sans-serif;        /* H1–H6 — temporary, pending designer confirmation of intended heading font */
  --wsh-font-body:          'Poppins', sans-serif;       /* Body, paragraphs */
  --wsh-font-button:        'Montserrat', sans-serif;    /* Buttons, CTAs */

  /* ----- Font Sizes ----- */
  --wsh-h1:                 60px;
  --wsh-h2:                 40px;
  --wsh-h3:                 25px;
  --wsh-h4:                 22px;
  --wsh-h5:                 18px;
  --wsh-h6:                 16px;
  --wsh-body-size:          16px;

  /* ----- Spacing ----- */
  --wsh-section-padding:    100px;
}