/* =========================================================================
   Stress Less with Samantha — Design Tokens
   Loaded on the Landing page only (see inc/enqueue.php).
   ========================================================================= */

:root {
  /* ---------- Backgrounds ---------- */
  --c-cream:        #F8F2E7;
  --c-pale-sky:     #EAF3F6;
  --c-white:        #FFFFFF;

  /* ---------- Brand ---------- */
  --c-navy:         #1B2A4E;
  --c-navy-90:      #283A66;
  --c-navy-80:      #354A7E;
  --c-teal:         #2BA6B9;
  --c-teal-hover:   #248EA0;
  --c-sky:          #7CC5D6;
  --c-gold:         #E8A547;
  --c-gold-hover:   #D49236;
  --c-coral:        #E97862;
  --c-coral-hover:  #D86551;
  --c-sage:         #84B59F;

  /* ---------- Text ---------- */
  --c-charcoal:     #23272F;
  --c-slate:        #5A6470;
  --c-muted:        #8A95A0;
  --c-on-dark:      #F8F2E7;

  /* ---------- States ---------- */
  --c-success:      #4F8A6A;
  --c-error:        #C75450;
  --c-info:         #2BA6B9;

  /* ---------- Lines & overlays ---------- */
  --c-border:        rgba(27, 42, 78, 0.08);
  --c-border-strong: rgba(27, 42, 78, 0.16);
  --c-overlay-navy:  rgba(27, 42, 78, 0.50);
  --c-overlay-deep:  rgba(27, 42, 78, 0.65);

  /* ---------- Shadows ---------- */
  --shadow-sm:        0 4px 12px rgba(27, 42, 78, 0.05);
  --shadow-md:        0 8px 24px rgba(27, 42, 78, 0.08);
  --shadow-lg:        0 16px 40px rgba(27, 42, 78, 0.12);
  --shadow-xl:        0 24px 56px rgba(27, 42, 78, 0.16);
  --shadow-glow-gold: 0 0 32px rgba(232, 165, 71, 0.25);
  --shadow-glow-teal: 0 0 32px rgba(43, 166, 185, 0.20);

  /* ---------- The signature gradient ---------- */
  --brand-gradient: linear-gradient(
    135deg,
    #1B2A4E 0%,
    #2A3D6E 25%,
    #2BA6B9 60%,
    #E8A547 90%,
    #E97862 100%
  );
  --brand-gradient-soft: linear-gradient(
    135deg,
    rgba(27, 42, 78, 0.08) 0%,
    rgba(43, 166, 185, 0.08) 60%,
    rgba(232, 165, 71, 0.08) 100%
  );

  /* ---------- Radii ---------- */
  --radius-sm:    8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---------- Spacing (8 px base) ---------- */
  --s-1:   8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-7:  96px;
  --s-8: 128px;

  /* ---------- Type stacks ---------- */
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- Type scale (desktop) ---------- */
  --t-display:  72px;
  --t-h1:       56px;
  --t-h2:       42px;
  --t-h3:       30px;
  --t-h4:       22px;
  --t-quote:    26px;
  --t-lead:     20px;
  --t-body:     17px;
  --t-small:    15px;
  --t-eyebrow:  13px;
  --t-button:   16px;

  /* ---------- Line heights ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.6;
  --lh-loose:   1.7;

  /* ---------- Letter spacing ---------- */
  --ls-display: -0.02em;
  --ls-tight:   -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.02em;
  --ls-eyebrow:  0.16em;

  /* ---------- Layout ---------- */
  --container-max:  1200px;
  --container-pad:   24px;
  --section-pad-y:  112px;

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-both: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:    180ms;
  --d-base:    320ms;
  --d-slow:    600ms;
  --d-hero:    800ms;

  /* ---------- Z-index ---------- */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    2000;
}

@media (max-width: 1024px) {
  :root { --section-pad-y: 80px; }
}

@media (max-width: 768px) {
  :root {
    --t-display:  48px;
    --t-h1:       40px;
    --t-h2:       32px;
    --t-h3:       24px;
    --t-h4:       20px;
    --t-quote:    22px;
    --t-lead:     18px;
    --t-body:     16px;
    --t-small:    14px;
    --t-button:   15px;
    --section-pad-y: 56px;
    --container-pad: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}