/* ==========================================================================
   DHARMIKAM — BASE
   Design tokens, base & typography, decorative primitives, buttons.
   Load order: base.css → sections.css → animations.css → responsive.css
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* Palette — deep Ayurvedic greens, warm creams, earth & gold */
  --deep:#0F2E1E;
  --forest:#1B4332;
  --herb:#2D6A4F;
  --sage:#74A98D;
  --sage-soft:#A9C9B6;
  --mist:#DCE9E1;
  --cream:#FBF7EF;
  --sand:#F2E9D8;
  --earth:#6B4F3A;
  --gold:#C0993F;
  --gold-soft:#E2C88A;

  --ink:#132218;
  --body:#4E6154;
  --muted:#7C8E82;
  --line:rgba(15,46,30,.10);

  /* Type */
  --font-display:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Radii */
  --r-xs:10px;
  --r-sm:16px;
  --r-md:24px;
  --r-lg:34px;
  --r-xl:48px;
  --r-pill:999px;

  /* Elevation */
  --sh-xs:0 2px 8px rgba(15,46,30,.05);
  --sh-sm:0 10px 26px -12px rgba(15,46,30,.16);
  --sh-md:0 24px 52px -22px rgba(15,46,30,.24);
  --sh-lg:0 44px 90px -34px rgba(15,46,30,.34);

  /* Motion */
  --ease:cubic-bezier(.22,.68,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Layout */
  --nav-h:82px;
  --pad-section:clamp(72px,9vw,140px);
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(15.5px,.42vw + 14.6px,17px);
  line-height:1.75;
  font-weight:400;
  color:var(--body);
  background:var(--cream);
  overflow-x:clip;            /* decorations never create a horizontal scrollbar */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,.display-font{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 30,"WONK" 1;
}

p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}

a{color:var(--herb);text-decoration:none;transition:color .3s var(--ease)}
a:hover{color:var(--gold)}

img{max-width:100%;height:90px;display:block}

::selection{background:var(--gold-soft);color:var(--deep)}

:focus-visible{
  outline:2.5px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--deep);color:var(--cream);
  padding:.85rem 1.4rem;border-radius:0 0 var(--r-xs) 0;
  font-weight:600;
}
.skip-link:focus{left:0;color:var(--cream)}

/* --- Type scale helpers --- */
.h-display{font-size:clamp(2.85rem,7.2vw,5.2rem);line-height:1.02;letter-spacing:-.03em}
.h-section{font-size:clamp(2.05rem,4.1vw,3.5rem);line-height:1.08}
.h-card{font-size:clamp(1.15rem,1.35vw,1.4rem);line-height:1.25;letter-spacing:-.01em}

.lead-text{
  font-size:clamp(1.02rem,.5vw + .92rem,1.2rem);
  line-height:1.78;color:var(--body);
}

/* Eyebrow / section label */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);
  font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--herb);margin-bottom:1.15rem;
}
.eyebrow::before{
  content:"";width:26px;height:1.5px;flex:none;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.eyebrow.is-light{color:var(--gold-soft)}
.eyebrow.is-centered{justify-content:center}
.eyebrow.is-centered::after{
  content:"";width:26px;height:1.5px;flex:none;
  background:linear-gradient(90deg,var(--gold),transparent);
}

/* Gold accent inside headings */
.accent{
  font-style:italic;
  background-image:linear-gradient(100deg,var(--gold) 10%,var(--earth) 90%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);


  padding-inline:.05em .07em;   /* italic needs breathing room either side */
}
/* On dark grounds the earth-brown end goes invisible — run gold -> light gold. */
.section--dark .accent,
.wellness .accent,
.cta__inner .accent{
  background-image:linear-gradient(100deg,var(--gold-soft) 6%,var(--gold) 94%);
  color:var(--gold-soft);
}

.text-cream{color:var(--cream)!important}
.text-mist{color:rgba(236,244,239,.82)!important}

/* ==========================================================================
   3. DECORATIVE PRIMITIVES (blobs, patterns, particles, rings)
   ========================================================================== */
.deco{position:absolute;pointer-events:none;z-index:0;user-select:none}

/* Large soft colour fields */
.blob{
  position:absolute;border-radius:50%;
  filter:blur(70px);opacity:.5;pointer-events:none;z-index:0;
}

/* Organic morphing frame */
.organic{
  border-radius:58% 42% 47% 53%/44% 40% 60% 56%;
  animation:morph 18s var(--ease) infinite;
}
.organic-2{
  border-radius:42% 58% 63% 37%/52% 46% 54% 48%;
  animation:morph2 22s var(--ease) infinite;
}

/* Botanical leaf silhouette layer */
.leaf-field{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.45;background-repeat:repeat;background-size:320px 320px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%232D6A4F' stroke-opacity='.12' stroke-width='1.4'%3E%3Cpath d='M40 260c0-60 40-105 100-118-46 26-74 66-84 122'/%3E%3Cpath d='M44 264c40 4 74-12 96-44'/%3E%3Cpath d='M250 60c0 46-30 80-76 90 35-20 56-50 64-93'/%3E%3Cpath d='M247 63c-30 3-56-9-73-33'/%3E%3Cpath d='M160 300c0-34 22-58 56-66-26 14-42 37-47 68'/%3E%3C/g%3E%3Ccircle cx='286' cy='196' r='3' fill='%23C0993F' fill-opacity='.18'/%3E%3Ccircle cx='96' cy='58' r='2.5' fill='%232D6A4F' fill-opacity='.16'/%3E%3C/svg%3E");
}

/* Floating particles */
.particle{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 32%,rgba(255,255,255,.95),var(--gold-soft));
  box-shadow:0 0 14px rgba(192,153,63,.55);
  opacity:.65;pointer-events:none;
}

/* Rotating dashed botanical ring */
.ring{
  position:absolute;border-radius:50%;
  border:1.5px dashed rgba(45,106,79,.34);
  animation:spin 44s linear infinite;pointer-events:none;
}
.ring--reverse{animation-direction:reverse}

/* Photo frames keep a botanical ground so a slow or failed image never
   flashes an empty white box. */
.hero__frame,.about__img-main,.about__img-sub,.trt-card__media,.wellness__bg{
  background-image:linear-gradient(150deg,var(--mist),var(--sand));
  background-color:var(--mist);
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn-ayur{
  --btn-bg:var(--deep);
  --btn-fg:var(--cream);
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1rem 1.9rem;
  font-family:var(--font-body);
  font-size:.79rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  line-height:1;text-align:center;
  color:var(--btn-fg);background:var(--btn-bg);
  border:1.5px solid transparent;border-radius:var(--r-pill);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),
             background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  box-shadow:0 12px 26px -14px rgba(15,46,30,.7);
  cursor:pointer;
}
.btn-ayur i{font-size:1.02rem;transition:transform .45s var(--ease-out)}
.btn-ayur:hover,.btn-ayur:focus-visible{
  color:var(--btn-fg);
  transform:translateY(-3px);
  box-shadow:0 20px 38px -16px rgba(15,46,30,.62);
}
.btn-ayur:hover i{transform:translateX(4px)}
.btn-ayur:active{transform:translateY(-1px)}

/* Shine sweep */
.btn-ayur::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);
  transform:translateX(-130%);
}
.btn-ayur:hover::after{animation:shine .95s var(--ease-out)}

/* Variants */
.btn-primary-ayur{--btn-bg:var(--deep);--btn-fg:var(--cream)}
.btn-primary-ayur:hover{--btn-bg:var(--forest)}

.btn-gold{--btn-fg:#231705;background-image:linear-gradient(105deg,var(--gold) 0%,#D9B45F 55%,var(--gold) 100%);background-color:var(--gold)}
.btn-gold:hover{--btn-fg:#231705}

.btn-outline-ayur{
  --btn-bg:transparent;--btn-fg:var(--deep);
  border-color:rgba(15,46,30,.28);box-shadow:none;
}
.btn-outline-ayur:hover{
  --btn-bg:var(--deep);--btn-fg:var(--cream);border-color:var(--deep);
  box-shadow:0 18px 34px -18px rgba(15,46,30,.6);
}

.btn-light-ayur{--btn-bg:var(--cream);--btn-fg:var(--deep);box-shadow:0 16px 34px -18px rgba(0,0,0,.5)}
.btn-light-ayur:hover{--btn-bg:#fff}

.btn-ghost-light{
  --btn-bg:rgba(255,255,255,.08);--btn-fg:var(--cream);
  border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:none;
}
.btn-ghost-light:hover{--btn-bg:rgba(255,255,255,.2);border-color:rgba(255,255,255,.75)}

/* Inline "learn more" link */
.link-more{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--herb);
}
.link-more i{transition:transform .4s var(--ease-out)}
.link-more:hover{color:var(--gold)}
.link-more:hover i{transform:translateX(5px)}

/* ==========================================================================
   5. SMALL STRUCTURAL HELPERS
   Extracted from inline style attributes so the markup stays clean.
   ========================================================================== */

/* The hidden <svg> sprite: taken out of flow so it never reserves space. */
.svg-sprite{position:absolute}

/* A .deco layer that fills its positioned parent (e.g. the particle field). */
.deco--fill{inset:0}

h1.h-display.anim-in.d-2 {
    font-size: 50px !important;
}