/* =============================================================================
   Ayandeh Clinic — Design Tokens
   -----------------------------------------------------------------------------
   Two layers:
     1. Base tokens — raw values for color + type. Use these directly when you need
        the underlying scale (e.g. --ayd-accent for accent-coloured borders).
     2. Semantic tokens — what designers should reach for most of the time:
        --bg, --surface, --fg1/fg2/fg3, --accent, --h1, --body, etc.
   The marketing site uses both Tailwind utilities (gray-50, blue-600) for
   navigation/footer chrome AND the marketing-root design system tokens
   (--marketing-accent #167767) for the bands of every page below the nav.
   The marketing tokens are the brand's design system; the Tailwind grays/blues
   are CMS shell defaults. Always prefer the warm/teal marketing palette for new
   work; reach for the Tailwind grays only for the shell (header/footer).
   ============================================================================= */

:root {
  /* ── Surfaces — warm cream stack ──────────────────────────────────────── */
  --ayd-cream:           #fffdf8;  /* primary canvas */
  --ayd-cream-elevated:  #ffffff;  /* cards on top of cream */
  --ayd-cream-warm:      #fbf3e6;  /* warm tint band */
  --ayd-cream-alt:       #f4efe6;  /* alt section */
  --ayd-mint:            #eaf4f1;  /* cool tint band */
  --ayd-lavender:        #f0eff8;  /* quote / quiet surfaces */
  --ayd-accent-soft:     #dff1ed;  /* tinted teal background */

  /* ── Borders & dividers ────────────────────────────────────────────── */
  --ayd-border:          #e1d8ca;  /* default warm border */
  --ayd-border-strong:   #d0c3b1;
  --ayd-border-cool:     #b9d6cf;  /* button border for secondary */

  /* ── Ink scale ─────────────────────────────────────────────────────── */
  --ayd-ink:             #17201d;  /* primary text on cream */
  --ayd-ink-soft:        #283733;
  --ayd-ink-muted:       #52615d;  /* secondary text */
  --ayd-body:            #394844;  /* prose body */

  /* ── Brand accents ─────────────────────────────────────────────────── */
  --ayd-accent:          #167767;  /* deep teal — primary brand color */
  --ayd-accent-hover:    #0f5f53;
  --ayd-accent-deep:     #0c443f;
  --ayd-accent-dark:     #103732;  /* invert-band gradient start */
  --ayd-plum:            #675b7d;  /* secondary accent — appears in invert gradient */
  --ayd-plum-soft:       #746179;
  --ayd-sand:            #c28938;  /* warm/star color (testimonials) */

  /* ── Semantic state ────────────────────────────────────────────────── */
  --ayd-success:         #3d8b63;
  --ayd-success-soft:    #ecf7ef;
  --ayd-warning:         #9a6116;
  --ayd-warning-soft:    #fff5df;
  --ayd-danger:          #a54747;
  --ayd-danger-soft:     #fff0ef;
  --ayd-info:            #167767;  /* info = accent */
  --ayd-info-soft:       #dff1ed;

  /* ── Tailwind shell palette (header/footer chrome) ─────────────────── */
  --ayd-gray-50:         #fafaf9;  /* stone-50 — site header bg */
  --ayd-gray-100:        #f3f4f6;
  --ayd-gray-200:        #e5e7eb;
  --ayd-gray-300:        #d1d5db;
  --ayd-gray-400:        #9ca3af;
  --ayd-gray-500:        #6b7280;
  --ayd-gray-600:        #4b5563;
  --ayd-gray-700:        #374151;
  --ayd-gray-800:        #1f2937;
  --ayd-gray-900:        #111827;  /* footer bg */
  --ayd-gray-950:        #030712;
  --ayd-cms-link:        #2563eb;  /* blue-600, used in CMS prose only */

  /* ── Gradients ─────────────────────────────────────────────────────── */
  --ayd-grad-invert:     linear-gradient(135deg, #0f3f3a 0%, #16675d 58%, #5d6f79 100%);
  --ayd-grad-stats:      linear-gradient(125deg, #103732 0%, #12554d 32%, #167767 66%, #746179 100%);
  --ayd-grad-hero-overlay: linear-gradient(180deg, rgb(13 34 31 / 0.58), rgb(7 22 20 / 0.82));

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --ayd-shadow-xs:       0 1px 2px rgb(36 28 18 / 0.06);
  --ayd-shadow-sm:       0 1px 2px rgb(36 28 18 / 0.06), 0 8px 24px rgb(36 28 18 / 0.06);
  --ayd-shadow-md:       0 16px 42px rgb(36 28 18 / 0.11);
  --ayd-shadow-media:    0 18px 46px rgb(23 32 29 / 0.16);
  --ayd-shadow-cta:      0 6px 16px rgb(23 95 87 / 0.12);
  --ayd-shadow-cta-hover:0 10px 24px rgb(15 79 73 / 0.18);

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --ayd-radius-sm:       0.375rem;   /* 6px — nav links, small chips */
  --ayd-radius-md:       0.625rem;   /* 10px — small cards */
  --ayd-radius-lg:       1rem;       /* 16px — default cards, banners */
  --ayd-radius-xl:       1.25rem;    /* 20px — CTA banner */
  --ayd-radius-pill:     999px;      /* all buttons */

  /* ── Spacing scale (matches Tailwind) ─────────────────────────────── */
  --ayd-space-1:         0.25rem;
  --ayd-space-2:         0.5rem;
  --ayd-space-3:         0.75rem;
  --ayd-space-4:         1rem;
  --ayd-space-6:         1.5rem;
  --ayd-space-8:         2rem;
  --ayd-space-12:        3rem;
  --ayd-space-16:        4rem;
  --ayd-section-py:      clamp(4rem, 8vw, 6.5rem);
  --ayd-section-px:      clamp(1rem, 4vw, 2rem);
  --ayd-content-max:     72rem;

  /* ── Type — families ──────────────────────────────────────────────── */
  --ayd-font-en:         'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ayd-font-fa:         'Vazir', Tahoma, 'Segoe UI', sans-serif;
  --ayd-font-mono:       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Type — weights ───────────────────────────────────────────────── */
  --ayd-weight-light:    300;
  --ayd-weight-regular:  400;
  --ayd-weight-medium:   500;
  --ayd-weight-semibold: 600;
  --ayd-weight-bold:     700;
  --ayd-weight-black:    800;

  /* ── Type — sizes ─────────────────────────────────────────────────── */
  --ayd-text-xs:         0.75rem;
  --ayd-text-sm:         0.875rem;
  --ayd-text-base:       1rem;
  --ayd-text-lg:         1.125rem;
  --ayd-text-xl:         1.25rem;
  --ayd-text-2xl:        1.5rem;
  --ayd-text-3xl:        1.875rem;

  --ayd-display-hero:    clamp(2.3rem, 6vw, 4.75rem);
  --ayd-display-section: clamp(1.75rem, 3.8vw, 2.7rem);
  --ayd-display-split:   clamp(1.55rem, 3vw, 2.25rem);
  --ayd-display-hero-sub:clamp(1.05rem, 2.1vw, 1.35rem);
  --ayd-display-intro:   clamp(1rem, 1.7vw, 1.14rem);

  /* ── Type — line heights ──────────────────────────────────────────── */
  --ayd-lh-tight:        1.08;
  --ayd-lh-snug:         1.18;
  --ayd-lh-card:         1.35;
  --ayd-lh-normal:       1.5;
  --ayd-lh-relaxed:      1.625;
  --ayd-lh-prose:        1.7;

  /* ── Eyebrow / overline ───────────────────────────────────────────── */
  --ayd-eyebrow-size:    0.78rem;
  --ayd-eyebrow-tracking:0.06em;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ayd-ease-out:        cubic-bezier(.4, 0, .2, 1);
  --ayd-dur-fast:        160ms;
  --ayd-dur-normal:      200ms;
  --ayd-dur-slow:        300ms;

  /* ─────────────────────────────────────────────────────────────────── */
  /*  Semantic aliases — reach for these first.                          */
  /* ─────────────────────────────────────────────────────────────────── */
  --bg:           var(--ayd-cream);
  --bg-alt:       var(--ayd-cream-alt);
  --bg-cool:      var(--ayd-mint);
  --bg-warm:      var(--ayd-cream-warm);
  --bg-invert:    var(--ayd-grad-invert);
  --surface:      var(--ayd-cream-elevated);

  --fg1:          var(--ayd-ink);
  --fg2:          var(--ayd-body);
  --fg3:          var(--ayd-ink-muted);
  --fg-on-invert: #fffaf0;

  --border:       var(--ayd-border);
  --border-strong:var(--ayd-border-strong);

  --accent:       var(--ayd-accent);
  --accent-hover: var(--ayd-accent-hover);
  --accent-soft:  var(--ayd-accent-soft);
  --link:         var(--ayd-accent-hover);
  --link-hover:   #0b473f;

  --serif-display: var(--ayd-font-en);
  --sans-display:  var(--ayd-font-en);
  --sans-body:     var(--ayd-font-en);
  --sans-fa:       var(--ayd-font-fa);
  --mono:          var(--ayd-font-mono);
}

/* =============================================================================
   Dark mode tokens — engaged via .dark on <html>
   ============================================================================= */
html.dark {
  --bg:           #030712;
  --bg-alt:       #0c0a09;
  --bg-cool:      #0f172a;
  --bg-warm:      #1c1917;
  --surface:      #1f2937;

  --fg1:          #f3f4f6;
  --fg2:          #d1d5db;
  --fg3:          #9ca3af;

  --border:       #374151;
  --border-strong:#4b5563;

  --accent:       #5cd9c2;
  --accent-hover: #93f0dc;
  --accent-soft:  #102a26;
  --link:         #7dd6c4;
  --link-hover:   #a1e4d7;

  /* soledit-document.css defines these on :root; override here for dark mode */
  --soledit-text:       #e2e8f0;
  --soledit-text-muted: #94a3b8;
  --soledit-link:       #7dd6c4;
  --soledit-link-hover: #a1e4d7;
}

/* =============================================================================
   Semantic element styles
   -----------------------------------------------------------------------------
   Wrap content in .ayd-prose or .ayd-marketing to get the brand's heading +
   body treatment.
   ============================================================================= */

.ayd-marketing,
.ayd-prose {
  font-family: var(--sans-body);
  color: var(--fg2);
  line-height: var(--ayd-lh-prose);
  font-size: var(--ayd-text-base);
}
.ayd-marketing :where(h1, h2, h3, h4),
.ayd-prose     :where(h1, h2, h3, h4) {
  color: var(--fg1);
  font-weight: var(--ayd-weight-black);
  letter-spacing: 0;
}
.ayd-marketing h1, .ayd-prose h1 {
  font-size: var(--ayd-display-hero);
  line-height: var(--ayd-lh-tight);
  text-wrap: balance;
}
.ayd-marketing h2, .ayd-prose h2 {
  font-size: var(--ayd-display-section);
  line-height: var(--ayd-lh-snug);
  text-wrap: balance;
}
.ayd-marketing h3, .ayd-prose h3 {
  font-size: var(--ayd-display-split);
  line-height: 1.2;
}
.ayd-marketing h4, .ayd-prose h4 {
  font-size: var(--ayd-text-xl);
  line-height: var(--ayd-lh-snug);
}
.ayd-marketing p, .ayd-prose p { color: var(--fg2); }
.ayd-marketing p + p, .ayd-prose p + p { margin-top: 1em; }

.ayd-marketing .ayd-eyebrow,
.ayd-prose     .ayd-eyebrow {
  color: var(--accent);
  font-size: var(--ayd-eyebrow-size);
  font-weight: var(--ayd-weight-black);
  letter-spacing: var(--ayd-eyebrow-tracking);
  text-transform: none;
}

.ayd-prose a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color var(--ayd-dur-fast) var(--ayd-ease-out);
}
.ayd-prose a:hover { color: var(--link-hover); }
.ayd-prose blockquote {
  margin: 1.5em 0;
  padding: 1.25rem 1.4rem;
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--ayd-radius-lg);
  background: color-mix(in srgb, var(--surface) 88%, var(--ayd-lavender));
  color: var(--ayd-ink-soft);
  font-style: italic;
}

[dir="rtl"] .ayd-marketing,
[dir="rtl"] .ayd-prose {
  font-family: var(--sans-fa);
}

:root[dir="rtl"] {
  --soledit-font-body: var(--sans-fa);
  --soledit-font-display: var(--sans-fa);
}