/* ============================================================
   VARIABLES — Design Tokens
   Hanalei Day Spa

   The single source of truth for color, type, spacing, and
   motion. Every other stylesheet and every module consumes
   these custom properties so the site stays cohesive and the
   CSS stays lean.

   A few tokens (--plum, --sage, --charcoal, --font-display,
   --font-body, --font-utility) are intentionally named to match
   the Site Settings overrides printed in <head> by
   hds_print_dynamic_css(). When the client picks a brand color
   or font in the admin, that inline <style> overrides the
   defaults below — no code change needed.
   ============================================================ */

:root {

  /* --------------------------------------------------------
     COLOR — Brand
     -------------------------------------------------------- */
  --plum: #765285;          /* primary brand (overridable in Site Settings) */
  --plum-dark: #5a3d66;     /* hover / pressed states */
  --plum-light: #f0eaf4;    /* tinted backgrounds */
  --plum-lighter: #f7f3fa;  /* faintest wash */

  --sage: #c3d3b9;          /* secondary accent (overridable in Site Settings) */
  --sage-dark: #8aaa7c;     /* sage text/icons on light backgrounds */
  --sage-light: #edf3e9;    /* sage tinted section background */

  /* --------------------------------------------------------
     COLOR — Neutrals & Surfaces
     -------------------------------------------------------- */
  --cream: #fefcf8;         /* default page background */
  --sand: #f5f0e8;          /* alternating warm section background */
  --charcoal: #2c2826;      /* primary text (overridable in Site Settings) */
  --mid: #6b6460;           /* secondary / body text */
  --light: #9a9490;         /* muted captions, meta */
  --white: #ffffff;

  /* --------------------------------------------------------
     COLOR — Lines & Rules
     -------------------------------------------------------- */
  --rule: rgba(118, 82, 133, 0.12);       /* plum-derived hairline */
  --rule-sage: rgba(139, 170, 124, 0.30); /* sage-derived hairline */
  --rule-light: rgba(44, 40, 38, 0.08);   /* neutral hairline on dark */

  /* --------------------------------------------------------
     COLOR — Functional (forms, focus, states)
     -------------------------------------------------------- */
  --focus-ring: rgba(118, 82, 133, 0.55);
  --error: #b3463b;
  --success: #5a7d4f;

  /* --------------------------------------------------------
     TYPEFACES
     Display  — Playfair Display (headlines, editorial voice)
     Body     — Lora (long-form reading serif)
     Utility  — Jost (eyebrows, labels, buttons, captions, meta)
     -------------------------------------------------------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --font-utility: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --------------------------------------------------------
     TYPE SCALE
     Body sizes stay fixed across breakpoints (readability).
     The largest display sizes scale down at breakpoints in
     global.css — layout-driven, never proportional zoom.
     -------------------------------------------------------- */
  --fs-hero: 56px;          /* hero h1 */
  --fs-display: 44px;       /* major section headings (h2.disp) */
  --fs-h1: 40px;            /* standard page h1 */
  --fs-h2: 32px;            /* h2 in body content */
  --fs-h3: 22px;            /* h3 / card titles */
  --fs-h4: 18px;            /* h4 */
  --fs-h5: 13px;            /* h5 — often used as a utility label */
  --fs-h6: 12px;            /* h6 — smallest heading */

  --fs-body-lg: 16px;       /* intro / lead paragraphs */
  --fs-body: 15px;          /* default body copy */
  --fs-body-sm: 14px;       /* dense card copy */

  --fs-eyebrow: 10px;       /* uppercase eyebrows */
  --fs-label: 11px;         /* buttons, nav, labels */
  --fs-caption: 10px;       /* image captions */
  --fs-meta: 13px;          /* post meta, footer links */

  /* --------------------------------------------------------
     FONT WEIGHTS
     -------------------------------------------------------- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* --------------------------------------------------------
     LINE HEIGHTS
     -------------------------------------------------------- */
  --lh-tight: 1.18;         /* display headings */
  --lh-heading: 1.3;        /* smaller headings */
  --lh-body: 1.9;           /* body copy — airy, spa-like */
  --lh-snug: 1.6;           /* blockquotes, leads */

  /* --------------------------------------------------------
     LETTER SPACING
     -------------------------------------------------------- */
  --ls-tight: 0.01em;
  --ls-body: 0;
  --ls-label: 0.1em;        /* nav, buttons */
  --ls-eyebrow: 0.24em;     /* uppercase eyebrows */
  --ls-wide: 0.28em;        /* hero eyebrow */

  /* --------------------------------------------------------
     SPACING SCALE
     -------------------------------------------------------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 88px;

  /* Section rhythm — overridden per breakpoint in global.css */
  --section-y: 88px;        /* vertical padding for full sections */
  --gutter: 40px;           /* horizontal page padding */

  /* --------------------------------------------------------
     LAYOUT
     -------------------------------------------------------- */
  --max-content: 1100px;    /* standard content container */
  --max-wide: 1200px;       /* nav / wide container */
  --max-narrow: 680px;      /* centered text (feature strips) */
  --max-reading: 760px;     /* long-form article measure */

  --nav-h: 68px;            /* sticky nav height (referenced in JS offsets) */

  /* --------------------------------------------------------
     BORDERS & RADIUS
     -------------------------------------------------------- */
  --radius-sm: 2px;         /* buttons */
  --radius: 3px;            /* cards, images */
  --radius-lg: 6px;         /* large panels */
  --border-hair: 1px;

  /* --------------------------------------------------------
     SHADOWS
     -------------------------------------------------------- */
  --shadow-sm: 0 2px 24px rgba(44, 40, 38, 0.08);
  --shadow-card: 0 16px 40px rgba(44, 40, 38, 0.10);
  --shadow-plum: 0 6px 20px rgba(118, 82, 133, 0.28);
  --shadow-sage: 0 8px 24px rgba(195, 211, 185, 0.40);

  /* --------------------------------------------------------
     MOTION
     The signature easing from the approved design — gentle,
     unhurried, "luxurious." Reused everywhere for cohesion.
     -------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.25s;
  --transition: 0.4s;
  --transition-slow: 0.9s;

  /* --------------------------------------------------------
     Z-INDEX SCALE
     -------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 600;
  --z-drawer: 490;
  --z-nav: 500;
  --z-overlay: 700;
}
