/* ============================================================
   DIVINE HEALING STUDIO — Design Tokens
   colors_and_type.css
   ============================================================ */

/* ── GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Poppins:wght@300;400;500;600;700&family=Dancing+Script:wght@600;700&display=swap');

/* ── FONT STACKS ──────────────────────────────────────────── */
:root {
  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-script:   'Dancing Script', cursive;

  /* ── BASE COLORS ──────────────────────────────────────── */
  --color-primary:        #5c3a9e;
  --color-primary-light:  #9472cc;
  --color-primary-dark:   #1d1459;
  --color-secondary:      #a882d8;

  --color-gold:           #c9a227;
  --color-gold-mid:       #d4ae3a;
  --color-gold-light:     #f2d97a;
  --color-gold-pale:      #fdf3d0;
  --color-gold-warm:      #b8891a;

  --color-lavender:       #ede0f8;
  --color-lavender-mid:   #d8c5f0;
  --color-lavender-deep:  #bea8e0;

  --color-cream:          #faf5eb;
  --color-cream-dark:     #f4edd8;
  --color-cream-gold:     #fdf6e3;
  --color-off-white:      #fdfaf2;
  --color-white:          #ffffff;

  --color-dark:           #100b32;
  --color-dark-mid:       #1c1148;
  --color-dark-deep:      #070420;

  --color-text:           #1d1459;
  --color-text-mid:       #483870;
  --color-text-soft:      #9080b5;

  /* ── GRADIENTS ─────────────────────────────────────────── */
  --grad-main:         linear-gradient(135deg, #1d1459 0%, #5c3a9e 42%, #9472cc 78%, #c9a227 100%);
  --grad-gold:         linear-gradient(90deg, #b8891a 0%, #d4ae3a 25%, #f2d97a 50%, #d4ae3a 75%, #b8891a 100%);
  --grad-shimmer:      linear-gradient(90deg, #b8891a 0%, #f2d97a 25%, #fdf6e3 45%, #f2d97a 65%, #c9a227 85%, #f2d97a 100%);
  --grad-aurora:       linear-gradient(135deg, #070420 0%, #1d1459 25%, #2e1268 50%, #1d1459 75%, #070420 100%);
  --grad-dark:         linear-gradient(160deg, #07041c 0%, #100b32 40%, #1c1148 70%, #271858 100%);
  --grad-soft:         linear-gradient(135deg, #ede0f8 0%, #f7eff5 60%, #fdfaf2 100%);
  --grad-cream:        linear-gradient(135deg, #faf5eb 0%, #ede0f8 100%);
  --grad-golden-cream: linear-gradient(135deg, #fdf6e3 0%, #f8ecc8 50%, #fdf6e3 100%);

  /* ── SHADOWS ───────────────────────────────────────────── */
  --shadow-xs:  0 2px 12px rgba(29, 20, 89, 0.07);
  --shadow-sm:  0 4px 24px rgba(29, 20, 89, 0.11);
  --shadow-md:  0 8px 40px rgba(29, 20, 89, 0.18);
  --shadow-lg:  0 16px 60px rgba(29, 20, 89, 0.26);

  --glow-gold:         0 0 18px rgba(201, 162, 39, 0.5), 0 0 36px rgba(201, 162, 39, 0.25);
  --glow-gold-strong:  0 0 24px rgba(201, 162, 39, 0.65), 0 0 48px rgba(201, 162, 39, 0.35);
  --glow-purple:       0 0 18px rgba(92, 58, 158, 0.45), 0 0 36px rgba(92, 58, 158, 0.2);

  /* ── BORDER RADIUS ─────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 50px;

  /* ── SPACING ───────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-25: 100px;

  /* ── TRANSITIONS ───────────────────────────────────────── */
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.7s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── LAYOUT ────────────────────────────────────────────── */
  --container-max: 1180px;
  --container-pad: 28px;
  --navbar-height: 72px;
  --section-pad: 100px;
}

/* ── SEMANTIC ALIASES ─────────────────────────────────────── */
:root {
  /* Foreground text */
  --fg1: var(--color-text);         /* primary body text */
  --fg2: var(--color-text-mid);     /* secondary body text */
  --fg3: var(--color-text-soft);    /* muted / placeholder */
  --fg-inverse: #ffffff;            /* text on dark backgrounds */

  /* Backgrounds */
  --bg-page:      var(--color-cream);       /* main page background */
  --bg-alt:       var(--color-cream-dark);  /* alternating section bg */
  --bg-card:      rgba(255,255,255,0.75);   /* glassmorphic card */
  --bg-dark:      var(--color-dark);        /* dark section */
  --bg-dark-mid:  var(--color-dark-mid);    /* dark mid-section */

  /* Brand */
  --brand:        var(--color-primary);
  --brand-light:  var(--color-primary-light);
  --brand-dark:   var(--color-primary-dark);
  --gold:         var(--color-gold);
  --accent:       var(--color-gold);

  /* Interactive */
  --interactive:       var(--color-primary);
  --interactive-hover: var(--color-primary-dark);
  --interactive-light: var(--color-lavender);

  /* Borders */
  --border-default: rgba(212, 168, 67, 0.2);
  --border-hover:   rgba(212, 168, 67, 0.5);
  --border-strong:  rgba(212, 168, 67, 0.6);
}

/* ── TYPOGRAPHIC SCALE (semantic) ─────────────────────────── */
:root {
  /* Display sizes */
  --text-hero:  clamp(3.2rem, 7vw, 6.5rem);   /* hero h1 */
  --text-h1:    clamp(2.8rem, 5vw, 4.5rem);    /* page h1 */
  --text-h2:    clamp(2.2rem, 4vw, 3.2rem);    /* section titles */
  --text-h3:    clamp(1.3rem, 2.2vw, 1.75rem); /* card titles */
  --text-h4:    1.25rem;                        /* sub-headings */
  --text-script:clamp(2rem, 4.5vw, 3.4rem);   /* Dancing Script strip */
  --text-sig:   1.6rem;                         /* signature script */

  /* Body sizes */
  --text-lead:  1.2rem;   /* intro/lead paragraph */
  --text-base:  0.92rem;  /* standard body copy */
  --text-sm:    0.87rem;  /* smaller body */
  --text-xs:    0.78rem;  /* small UI text */
  --text-xxs:   0.72rem;  /* very small labels/notes */

  /* Label/UI */
  --text-label:  0.75rem; /* section labels (all caps) */
  --text-btn:    0.86rem; /* button text */
  --text-nav:    0.8rem;  /* nav links */
  --text-badge:  0.66rem; /* badges/chips */
  --text-price:  2.2rem;  /* price display */
  --text-stat:   2rem;    /* testimonials stats */

  /* Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-base:   1.7;
  --leading-relaxed:1.85;
  --leading-loose:  1.9;

  /* Letter spacing */
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.25em;   /* section labels */
  --tracking-ultra:   0.28em;   /* wordmark */
}

/* ── BASE ELEMENT STYLES ──────────────────────────────────── */
body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--bg-page);
  line-height: var(--leading-base);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  color: var(--fg1);
}

h1 { font-size: var(--text-h1);   font-weight: var(--weight-medium); }
h2 { font-size: var(--text-h2);   font-weight: var(--weight-medium); }
h3 { font-size: var(--text-h3);   font-weight: var(--weight-medium); }
h4 { font-size: var(--text-h4);   font-weight: var(--weight-medium); }

p {
  font-size: var(--text-base);
  color: var(--fg2);
  line-height: var(--leading-relaxed);
}

em {
  font-style: italic;
  color: var(--brand-light);
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--brand-dark); }

/* ── UTILITY CLASSES ──────────────────────────────────────── */

/* Section label — ALL CAPS, gold, wide tracking */
.label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}

/* Script accent */
.script {
  font-family: var(--font-script);
  font-weight: 700;
}

/* Shimmer text (animated gold gradient) */
.shimmer-text {
  background: var(--grad-shimmer);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-sweep 3.5s linear infinite;
}

/* Section title em shimmer */
.section-title em {
  background: var(--grad-shimmer);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-sweep 4s linear infinite;
  font-style: italic;
  display: inline;
}

/* ── CORE ANIMATIONS ──────────────────────────────────────── */
@keyframes shimmer-sweep {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes aurora {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8) rotate(0deg); }
  50%       { opacity: 1;    transform: scale(1.3) rotate(20deg); }
}

@keyframes gentle-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: var(--glow-gold); }
  50%       { box-shadow: 0 0 32px rgba(212,168,67,.65), 0 0 64px rgba(212,168,67,.3); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes btn-shine {
  0%       { left: -100%; }
  40%, 100% { left: 130%; }
}

@keyframes float-up {
  0%   { opacity: 0; transform: translateY(0) scale(0) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(.4) rotate(180deg); }
}

@keyframes card-pulse {
  0%, 100% { box-shadow: var(--shadow-xs); }
  50%       { box-shadow: var(--shadow-sm), 0 0 22px rgba(212,168,67,.18); }
}