/* ============================================================================
 * VIGLOW GO — base.css
 * Tokens · reset · typography · layout primitives
 * Identity (extracted from /Refferences): AQUA-MINT backgrounds · DEEP TEAL-PINE
 * ink (logo) · TEAL accent · soft PINK pop · WHITE cards · light GOLD (serum) ·
 * TEAL gradient CTA. Clean, watery, premium skincare. Mobile-first RTL.
 * NOTE: token NAMES kept stable; only VALUES match the VIGLOW references.
 * ========================================================================== */
:root {
  /* Surfaces — aqua mint / white */
  --vg-blush:     #EAF6F5;   /* page background (aqua mint) */
  --vg-cream:     #DBEFEE;   /* alternate section / raised aqua surface */
  --vg-cream-2:   #CCE7E5;
  --vg-white:     #FFFFFF;

  /* Primary accent = TEAL (checkmarks, eyebrows, selected, ribbons, icons) */
  --vg-rose:      #2FA8A0;   /* primary accent (teal) */
  --vg-rose-2:    #36B8AF;   /* teal hover */
  --vg-rose-deep: #1E8C84;   /* teal deep (countbar/urgency/accents) */

  /* Ink — brand DEEP TEAL-PINE (sampled from the VIGLOW logo) */
  --vg-plum:      #023A36;   /* headings / dark surface (logo pine-teal) */
  --vg-ink:       #14322F;   /* primary text on light surfaces */
  --vg-muted-ink: rgba(20,50,47,.62);
  --vg-line:      rgba(2,58,54,.12);
  --vg-line-soft: rgba(2,58,54,.08);

  /* Soft pink pop (problem accents / highlights) + light gold (serum) */
  --vg-pink:      #E8528C;
  --vg-pink-soft: #F6D7E4;
  --vg-gold:      #C9A86A;
  --vg-gold-soft: #E4C98C;
  /* Sage kept as a subtle natural/eco cue */
  --vg-sage:      #9FB89C;
  --vg-sage-deep: #1E8C84;   /* aligned to teal so trust ticks read teal */

  --vg-radius:    18px;
  --vg-radius-sm: 12px;
  --vg-shell:     600px;
  --vg-shadow:    0 18px 46px rgba(2,58,54,.16);
  --vg-shadow-sm: 0 8px 22px rgba(2,58,54,.10);
  --vg-font:         "Tajawal", "Cairo", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --vg-font-heading: "Cairo", "Tajawal", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

  /* ── Themeable conversion block + CTA ─────────────────────────────────────
   * CTA = horizontal TEAL gradient (deep teal → bright teal, per the supplied
   * swatch). Premium, professional, on-brand. Change here to retune all CTAs. */
  --conversion-bg:          var(--vg-cream);
  --conversion-bg-gradient: linear-gradient(180deg, #FFFFFF 0%, var(--vg-cream) 100%);
  --conversion-ink:         var(--vg-ink);
  --conversion-muted:       var(--vg-muted-ink);
  --cta-bg:                 linear-gradient(90deg, #02554D 0%, #0E8C80 55%, #16AA9C 100%);
  --cta-bg-hover:           linear-gradient(90deg, #036358 0%, #129E90 55%, #20BCAD 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--vg-font);
  background: var(--vg-blush);
  color: var(--vg-ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; font-family: var(--vg-font-heading); color: var(--vg-plum); }
p { margin: 0; }

/* Layout primitives */
.vg-page { width: 100%; }
.vg-shell { width: 100%; max-width: var(--vg-shell); margin: 0 auto; padding: 0 18px; }
.vg-section { padding: 38px 0; position: relative; }
.vg-section-alt { background: linear-gradient(180deg, var(--vg-cream) 0%, #FFFFFF 100%); }
.vg-section-tight { padding: 18px 0; }
.vg-center { text-align: center; }

.vg-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vg-rose-deep);
}
.vg-title { font-size: clamp(26px, 7vw, 38px); }
.vg-title-sm { font-size: clamp(21px, 5.4vw, 28px); }
.vg-copy { color: var(--vg-muted-ink); font-size: 15.5px; }

.vg-section-head { display: grid; gap: 9px; margin-bottom: 22px; }

/* Focus visibility for accessibility */
:focus-visible { outline: 3px solid var(--vg-rose-2); outline-offset: 2px; border-radius: 8px; }