/* ==========================================================================
   Diana Healing Arts — Colors & Type tokens
   Grounded in earth (sand, stone, moss) with ritual purple, candle gold,
   and deep plum. The palette reads "sun-dappled garden at dusk" — warm,
   organic, a little mystical; never neon, never cold tech-blue.
   ========================================================================== */

:root {
  /* ——— CORE BRAND ——— */
  --plum-900:     #2A1724;  /* near-black, signature deep surface */
  --plum-800:     #3B2033;  /* primary dark background */
  --plum-700:     #4E2A43;
  --amethyst-600: #6B3A66;  /* ritual purple — the dress */
  --amethyst-500: #7E4A7C;
  --amethyst-400: #9B6A99;
  --mauve-300:    #B995B4;
  --mauve-200:    #D9C3D4;
  --mauve-100:    #ECDEE8;  /* soft tinted surface */

  /* ——— EARTH NEUTRALS ——— */
  --linen-50:     #F6F1E8;  /* page background, linen cloth */
  --linen-100:    #EFE6D4;
  --sand-200:     #E4D5B7;
  --clay-300:     #C9A37E;  /* warm tan — ornament accent */
  --clay-400:     #A47850;
  --earth-600:    #6B4A31;
  --earth-800:    #3E2A1C;
  --ink-900:      #1F150F;  /* primary text on light */
  --ink-700:      #3A2C22;
  --ink-500:      #6B5A4C;  /* secondary text */
  --ink-400:      #8E7E6F;  /* tertiary / meta */
  --ink-300:      #B3A595;  /* disabled / very quiet */

  /* ——— ACCENTS ——— */
  --burgundy-800: #4A1C26;  /* deep wine — supporting dark */
  --burgundy-700: #6B2535;  /* signature burgundy */
  --burgundy-600: #8A3142;  /* burgundy accent */
  --burgundy-300: #C88995;  /* faded wine tint (sparing) */
  --moss-600:     #5A6B3A;  /* garden foliage */
  --moss-500:     #7A8B4F;
  --moss-200:     #C9D1A8;
  --gold-500:     #B08938;  /* quieter candle gold — used sparingly */
  --gold-200:     #E8D29A;

  /* ——— SEMANTIC — LIGHT SURFACE (default) ——— */
  --bg:           var(--linen-50);
  --bg-raised:    #FBF7EF;       /* cards, elevated surfaces */
  --bg-sunk:      #EFE6D4;       /* wells, quiet sections */
  --bg-tint:      #F3EADB;       /* alt striping */
  --fg1:          var(--ink-900);
  --fg2:          var(--ink-700);
  --fg3:          var(--ink-500);
  --fg4:          var(--ink-400);
  --fg-quiet:     var(--ink-300);
  --fg-on-dark:   #F6F1E8;
  --border:       #E0D3BB;        /* hairline, warm */
  --border-strong:#C9B896;
  --divider:      #D8C9AE;

  --accent:       var(--amethyst-600);
  --accent-hover: var(--plum-700);
  --accent-soft:  #EADCE8;
  --accent-ink:   var(--fg-on-dark);

  --gold:         var(--gold-500);
  --gold-soft:    var(--gold-200);
  --burgundy:     var(--burgundy-700);

  --success:      #6E8A48;
  --warning:      #C9883B;
  --danger:       #A64A45;

  /* ——— SHADOWS — warm, candlelit, never pure black ——— */
  --shadow-xs:    0 1px 2px rgba(62, 42, 28, 0.06);
  --shadow-sm:    0 2px 6px rgba(62, 42, 28, 0.08);
  --shadow-md:    0 8px 24px rgba(62, 42, 28, 0.10), 0 2px 4px rgba(62, 42, 28, 0.04);
  --shadow-lg:    0 20px 48px rgba(62, 42, 28, 0.16), 0 4px 10px rgba(62, 42, 28, 0.06);
  --shadow-ritual:0 24px 60px rgba(42, 23, 36, 0.28);   /* for plum/purple surfaces */
  --shadow-inset: inset 0 1px 0 rgba(255, 247, 233, 0.6), inset 0 -1px 0 rgba(62,42,28,.04);

  /* ——— RADII — gentle, never sharp, never pill-spammy ——— */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  34px;
  --r-full: 999px;

  /* ——— SPACING scale (4px base) ——— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ——— TYPEFACES ——— */
  /* Display: Cormorant Garamond — high-contrast, romantic serif w/ elegant italics.
     Chosen as a warm, ritual-feeling alternative to Trajan/Didone; pairs with the
     hand-lettered feel of the brand.                                               */
  --font-display: "Cormorant Garamond", "EB Garamond", "Playfair Display",
                  ui-serif, Georgia, serif;
  /* Hebrew primary body: Assistant — clean, readable humanist sans that works beautifully in RTL. */
  --font-body:    "Assistant", "Nunito", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  /* Hebrew display alt: Frank Ruhl Libre — high-contrast Hebrew serif that pairs with Cormorant. */
  --font-display-he: "Frank Ruhl Libre", "Cormorant Garamond", ui-serif, Georgia, serif;
  /* Hand: Caveat — used VERY sparingly for signature / ritual pull-quotes.         */
  --font-hand:    "Caveat", "Homemade Apple", cursive;
  /* Mono — for receipts / booking codes only.                                      */
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ——— TYPE SCALE ——— */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;
  --fs-6xl:  112px;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.6;
  --lh-loose:   1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-ritual: 0.24em;  /* ALL-CAPS labels, like a tarot card title */

  /* ——— MOTION ——— */
  --ease-smooth: cubic-bezier(.22, .61, .36, 1);   /* breath-like */
  --ease-rise:   cubic-bezier(.19, 1, .22, 1);     /* quartic out, ceremonial */
  --dur-fast:    160ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
  --dur-ritual:  900ms;

  /* ——— EFFECTS ——— */
  --grain-opacity: 0.06;
  --vignette: radial-gradient(ellipse at center, transparent 55%, rgba(42,23,36,0.18) 100%);
}

/* ——— DARK / RITUAL surface (use for hero panels, testimonial cards, booking hero) ——— */
.surface-ritual,
[data-surface="ritual"] {
  --bg:         var(--plum-800);
  --bg-raised:  #452639;
  --bg-sunk:    #22121D;
  --bg-tint:    #3F2136;
  --fg1:        #F6EBE5;
  --fg2:        #E3CFD4;
  --fg3:        #B99AAF;
  --fg4:        #8F6F87;
  --border:     #5B334C;
  --border-strong: #7B4A6B;
  --divider:    #4A2A3E;
  --accent:     var(--gold-400);
  --accent-hover: var(--gold-500);
  --accent-ink: var(--plum-900);
  color: var(--fg1);
  background: var(--bg);
}

/* ==========================================================================
   Semantic element styles — drop-in defaults
   ========================================================================== */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;                /* regular, let the contrast do the work */
  font-size: clamp(var(--fs-3xl), 5.5vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}
h1 em, .h1 em { font-style: italic; color: var(--accent); }

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--fs-2xl), 3.6vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg2);
  max-width: 62ch;
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg2);
  max-width: 42ch;
}

.eyebrow, .ritual-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-ritual);
  text-transform: uppercase;
  color: var(--accent);
}

.hand {
  font-family: var(--font-hand);
  font-weight: 500;
  line-height: 1.1;
}

.meta {
  font-size: var(--fs-sm);
  color: var(--fg3);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunk);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}

hr {
  border: 0;
  height: 1px;
  background: var(--divider);
  margin: var(--s-8) 0;
}

/* A signature ornamental divider with a centered diamond — used between
   paragraphs in long-form "About" / "My Story" content.                 */
.divider-ornament {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--clay-400);
  margin: var(--s-10) 0;
}
.divider-ornament::before,
.divider-ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.divider-ornament::after { }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

::selection {
  background: color-mix(in srgb, var(--amethyst-400) 55%, transparent);
  color: var(--ink-900);
}