/* ==========================================================================
   Divine Wellness — Design Tokens
   Single source of truth for every color, font, radius, shadow, and spacing
   value on the site. Pages and components must reference these variables —
   never raw hex values. See CLAUDE.md for usage rules.
   ========================================================================== */

:root {
  /* ---- Ink (teal) scale — headings, dark surfaces, primary buttons ---- */
  --ink:        #163A43;  /* primary dark teal ink */
  --ink-deep:   #133540;  /* announcement-bar gradient start */
  --ink-light:  #1B4550;  /* announcement-bar gradient end */
  --ink-2:      #204A57;  /* mid teal — nav links, sub-headings, body links */
  --ink-soft:   #2E535E;  /* hero body text */
  --body:       #3D5C66;  /* default body text on light */
  --footer-bg:  #12313A;

  /* ---- Cream / paper ---- */
  --cream:        #F1E8DB; /* paper — text on dark, cream buttons */
  --cream-bright: #FDF8EF;
  --cream-warm:   #F4EEE2;
  --sand:         #EDEAE0;
  --nav-frost:    rgba(241, 238, 229, 0.9);

  /* ---- Accents ---- */
  --coral:     #E37A6D;  /* universal hover / highlight accent */
  --blue:      #4A7FA8;  /* eyebrows, em accents */
  --gold:      #E8D28E;
  --gold-deep: #D3B45E;
  --mauve:     #C78AB2;  /* gemstone theme */
  --sage:      #6D8F73;
  --cyan:      #64B7C6;  /* focus rings, em accents on dark */
  --plum:      #3B3A5A;  /* gemstone dark gradient */
  --plum-deep: #2B2A44;
  --green-dark: #2E4A3C; /* healing-touch gradient */
  --green-mid:  #446B4E;
  --green-dark-2: #35503F; /* healing-touch section-gradient midpoint */
  --video-well: #0d232a;  /* letterbox behind video embeds */
  --teal-mid:   #2B5D63; /* massage-card gradient end */
  --blue-soft:  #5D8FA9; /* products-card gradient midpoint */
  --sage-blue:  #7FA394; /* products-card gradient end */
  --taupe:      #8A7F72; /* fine print on cream */
  --blue-mist:  #9BB6C0; /* breadcrumb separators */
  --blue-slate: #6E93A0; /* breadcrumb separators on dark heroes */
  --lavender-mist: #B9A6C9; /* fine print on plum surfaces */
  --coral-mist: #F2B8AE; /* form error text on dark panels */
  --slate-mist: #7C97A1; /* license fine print on light */
  --sage-deep:  #5C7E62; /* tag labels on sage-tinted cards */
  --mauve-deep: #B0619B; /* tag labels on pink-tinted cards */

  /* ---- Background tints (light section fills) ---- */
  --page-bg:    #EAF2F1;
  --tint-blue:  #DCEEF4;
  --tint-green: #E4EEE8;
  --tint-mint:  #E9F0EA;
  --tint-pink:  #F2E2E5;
  --tint-pink-soft: #F3EAE9;
  --tint-aqua:  #E6F1F0;
  --tint-sage:  #C7D8C9;
  --tint-sage-soft: #D8E4D6;
  --tint-mint-soft: #EDF3EC;

  /* ---- Text on dark surfaces ---- */
  --on-dark:        #DCEEF4;
  --on-dark-muted:  #C4D4DC;
  --on-dark-soft:   #B9D6DD;
  --on-dark-faint:  #9FCBD4;
  --on-dark-pink:   #F2E2E5;
  --on-dark-green:  #CFE0D3;
  --on-dark-mint:   #E7EDE6;
  --footer-text:    #9FC3CC;
  --footer-meta:    #7FA5AF;
  --massage-note:   #7FB6C2;

  /* ---- Document / product-mock surfaces (CBD COA card, product tiles) ---- */
  --cream-mist: #F6F1E8; /* product-grid card fill */
  --sand-soft:  #EFE7DC; /* bundles format-card gradient end */
  --gold-bronze: #A98A3A; /* bundle tag labels on sand */
  --paper-gray: #F6F6F2; /* COA document background */
  --doc-ink:    #1E2A2E; /* COA document body ink */
  --doc-gray:   #6B7B80; /* COA batch line */
  --doc-slate:  #33474D; /* COA row keys */
  --doc-mist:   #8A979B; /* COA fine print */
  --gray-teal:  #4A6069; /* legal disclaimer text */

  /* ---- Temporary photo-placeholder stripes (About page; remove with real photos) ---- */
  --ph-sage-a: #DCE7DE;
  --ph-sage-b: #D0DFD3;
  --ph-sand-a: #EDE1D2;
  --ph-sand-b: #E3D4C2;
  --ph-brown:  #6B4E3D;

  /* ---- Hairlines & washes ---- */
  --hairline:       rgba(22, 58, 67, 0.08);
  --hairline-soft:  rgba(22, 58, 67, 0.06);
  --hairline-mid:   rgba(22, 58, 67, 0.15);
  --hairline-strong: rgba(22, 58, 67, 0.25);
  --hairline-light: rgba(220, 238, 244, 0.13); /* borders on dark surfaces */
  --wash-white:     rgba(255, 255, 255, 0.55);
  --wash-white-soft: rgba(255, 255, 255, 0.5);

  /* ---- Typography ---- */
  --font-serif: 'Newsreader', serif;
  --font-sans:  'Manrope', sans-serif;

  --fs-h1:      clamp(40px, 4.6vw, 62px);   /* hero display */
  --fs-h2:      clamp(30px, 3.4vw, 44px);   /* standard section heading */
  --fs-h2-lg:   clamp(30px, 3.4vw, 46px);   /* dark feature sections */
  --fs-h2-xl:   clamp(32px, 3.8vw, 50px);   /* statement / final CTA */
  --fs-h2-sm:   clamp(28px, 3.2vw, 42px);   /* visit / updates */
  --fs-h3:      clamp(24px, 2.4vw, 30px);   /* card titles */
  --fs-h3-lg:   clamp(26px, 2.8vw, 36px);   /* full-width feature card */
  --fs-lead:    clamp(20px, 2vw, 25px);     /* hero italic sub-line */
  --fs-body:    16px;
  --fs-body-lg: 16.5px;
  --fs-body-md: 15.5px;
  --fs-body-sm: 15px;
  --fs-ui:      14.5px;   /* buttons, card meta */
  --fs-small:   13.5px;
  --fs-micro:   12.5px;
  --fs-eyebrow: 12px;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-body:   1.7;
  --lh-loose:  1.75;
  --lh-airy:   1.8;

  --track-eyebrow: 0.18em;
  --track-label:   0.14em;
  --track-display: -0.01em;

  /* ---- Radii ---- */
  --r-pill:    999px;
  --r-chip:    12px;
  --r-card-sm: 18px;
  --r-card:    22px;
  --r-card-md: 24px;
  --r-card-lg: 26px;
  --r-card-xl: 30px;
  --r-panel:   34px;

  /* ---- Shadows (teal-tinted, deep negative spread = "lifted" look) ---- */
  --shadow-btn:      0 14px 28px -16px rgba(22, 58, 67, 0.55);
  --shadow-card:     0 18px 36px -26px rgba(22, 58, 67, 0.5);
  --shadow-card-soft: 0 14px 32px -26px rgba(22, 58, 67, 0.4);
  --shadow-card-lg:  0 30px 56px -32px rgba(22, 58, 67, 0.6);
  --shadow-float:    0 24px 44px -22px rgba(22, 58, 67, 0.6);
  --shadow-panel:    0 40px 70px -36px rgba(22, 58, 67, 0.7);
  --shadow-nav:      0 12px 32px -18px rgba(22, 58, 67, 0.35);
  --shadow-dropdown: 0 24px 48px -20px rgba(22, 58, 67, 0.45);
  --shadow-photo:    0 30px 56px -30px rgba(22, 58, 67, 0.5);

  /* ---- Layout ---- */
  --container:   1180px;
  --gutter:      24px;
  --section-pad:    clamp(64px, 8vw, 104px);  /* standard section */
  --section-pad-lg: clamp(64px, 8vw, 110px);  /* dark feature sections */
  --section-pad-sm: clamp(60px, 7vw, 92px);   /* updates / narrow sections */

  /* ---- Motion ---- */
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --hover-fast:  0.25s ease;
  --hover-slow:  0.3s ease;
  --hover-card:  0.4s ease;

  /* ---- Contextual accent (set per element via .accent-* utilities) ---- */
  --accent: var(--blue);
}