@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600;700&display=swap');

/* Aileron — bundled in /assets/fonts/aileron/ */
@font-face {
  font-family: 'Aileron';
  src: url('../fonts/aileron/Aileron-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}

/* Gelica — display serif for H1s */
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-Regular.woff2') format('woff2'),
       url('../fonts/Gelica-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-Medium.woff2') format('woff2'),
       url('../fonts/Gelica-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* Tiempos Headline — serif display for H1s */
@font-face {
  font-family: 'Tiempos Headline';
  src: url('../fonts/tiempos/TiemposHeadline-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiempos Headline';
  src: url('../fonts/tiempos/TiemposHeadline-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiempos Headline';
  src: url('../fonts/tiempos/TiemposHeadline-SemiboldItalic.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}

/* Theafalina — elegant script for logo wordmark */
@font-face {
  font-family: 'Theafalina';
  src: url('../fonts/theafalina/Theafalina.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Rosalyn — script, used for logo wordmark */
@font-face {
  font-family: 'Rosalyn';
  src: url('../fonts/rosalyn/CSRosalyn-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rosalyn';
  src: url('../fonts/rosalyn/CSRosalyn-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Suisse Intl — bundled */
@font-face {
  font-family: 'Suisse Intl';
  src: url('../fonts/suisse/SuisseIntl-Thin.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Suisse Intl';
  src: url('../fonts/suisse/SuisseIntl-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Suisse Intl';
  src: url('../fonts/suisse/SuisseIntl-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Shapiro — bundled */
@font-face {
  font-family: 'Shapiro';
  src: url('../fonts/shapiro/Shapiro-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Shapiro';
  src: url('../fonts/shapiro/Shapiro-Text.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Shapiro';
  src: url('../fonts/shapiro/Shapiro-Air.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aileron';
  src: url('../fonts/aileron/Aileron-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aileron';
  src: url('../fonts/aileron/Aileron-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aileron';
  src: url('../fonts/aileron/Aileron-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aileron';
  src: url('../fonts/aileron/Aileron-Heavy.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aileron';
  src: url('../fonts/aileron/Aileron-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Praxis Seelenbalsam — design tokens
 * Extracted from Figma file ZfYDS0YfcrRVn0tHImxywO (Jeannine Amato).
 * Note: source file had no published Figma Variables — values below were
 * mined from the raw design context (colors, fonts, sizes, radii).
 */

:root {
  /* ── Brand colors ─────────────────────────────────────────────────── */
  --mx-color-brand:           #f372b3; /* vibrant pink — primary brand */
  --mx-color-brand-deep:      #dc5691; /* deeper pink — hover/active */
  --mx-color-brand-soft:      #ff74ba; /* action pink — CTAs */
  --mx-color-brand-rose:      #cf659a; /* rose accent */

  /* Headings / deep tones */
  --mx-color-ink:             #45375d; /* deep purple — primary heading */
  --mx-color-ink-maroon:      #5d2c42; /* maroon accent */
  --mx-color-ink-plum:        #603b4d; /* dark purple */

  /* Body / secondary text */
  --mx-color-text:            #53475c; /* muted purple — body */
  --mx-color-text-muted:      #514f4d; /* dark grey */
  --mx-color-text-cool:       #435871; /* blue-grey */
  --mx-color-text-on-dark:    #fbd7e7; /* pale pink on dark bg */

  /* Surfaces / backgrounds */
  --mx-color-surface-1:       #ffffff; /* base white */
  --mx-color-surface-2:       #ffe9ea; /* pale pink wash */
  --mx-color-surface-3:       #ffeeee; /* shell */
  --mx-color-surface-dark:    #431f17; /* dark brown overlay */

  /* Background tint aliases (used by hero/about/services breakouts) */
  --mx-color-surface-tint:    #ffe9ea; /* matches surface-2 (pale pink) */
  --mx-color-surface-tint-2:  #fff4f5; /* very pale pink/cream blend */
  --mx-color-surface-cream:   #fdf6f0; /* warm cream */

  /* Decorative accents */
  --mx-color-accent-peach:    #efa1a2;
  --mx-color-accent-light:    #ffbdbe;

  /* Service gradients */
  --mx-grad-teal:   linear-gradient(135deg, #2daebc 0%, #39b0bd 100%);
  --mx-grad-gold:   linear-gradient(135deg, #c5a242 0%, #d39f3e 100%);
  --mx-grad-pink:   linear-gradient(135deg, #e4529b 0%, #f95fac 100%);

  /* ── Typography ───────────────────────────────────────────────────── */
  --mx-font-display: 'Suisse Intl', 'Aileron', system-ui, -apple-system, sans-serif;
  --mx-font-accent:  'Aileron', system-ui, -apple-system, sans-serif;
  --mx-font-body:    'Aileron', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --mx-font-rounded: 'Aileron', system-ui, -apple-system, sans-serif;
  --mx-font-eyebrow: 'Aileron', system-ui, sans-serif;

  /* Font sizes (px → rem, base 16) */
  --mx-fs-xs:   0.875rem; /* 14 */
  --mx-fs-sm:   1rem;     /* 16 */
  --mx-fs-md:   1.125rem; /* 18 */
  --mx-fs-lg:   1.375rem; /* 22 */
  --mx-fs-xl:   1.5rem;   /* 24 */
  --mx-fs-2xl:  2rem;     /* 32 */
  --mx-fs-3xl:  2.375rem; /* 38 */
  --mx-fs-4xl:  3.25rem;  /* 52 */
  --mx-fs-5xl:  3.75rem;  /* 60 */
  --mx-fs-6xl:  5rem;     /* 80 */
  --mx-fs-hero: 5.3125rem;/* 85 */

  /* Weights & rhythm */
  --mx-fw-regular: 400;
  --mx-fw-medium:  500;
  --mx-fw-semibold:600;
  --mx-fw-bold:    700;

  --mx-lh-tight:   1.1;
  --mx-lh-snug:    1.25;
  --mx-lh-normal:  1.5;
  --mx-lh-relaxed: 1.7;

  --mx-tracking-tight:  -0.01em;
  --mx-tracking-normal: 0;
  --mx-tracking-wide:   0.08em;  /* eyebrows / uppercase */

  /* ── Spacing scale ────────────────────────────────────────────────── */
  --mx-space-xs:   4px;
  --mx-space-sm:   8px;
  --mx-space-md:  16px;
  --mx-space-lg:  24px;
  --mx-space-xl:  32px;
  --mx-space-2xl: 48px;
  --mx-space-3xl: 64px;
  --mx-space-4xl: 96px;
  --mx-space-5xl: 128px;

  /* Layout */
  --mx-container-max: 1615px;  /* design content width */
  --mx-container-bleed: 1820px;/* full bleed */
  --mx-gutter:        108px;   /* desktop side margin */

  /* ── Border radii ─────────────────────────────────────────────────── */
  --mx-radius-sm:    10px;  /* small cards */
  --mx-radius-md:    15px;  /* image containers */
  --mx-radius-lg:    46px;  /* themed dividers */
  --mx-radius-xl:    68px;  /* large rounded buttons */
  --mx-radius-pill:  9999px;/* full pill buttons */
  --mx-radius-round: 50%;

  /* ── Motion ───────────────────────────────────────────────────────── */
  --mx-dur-fast:   150ms;
  --mx-dur-base:   250ms;
  --mx-dur-slow:   400ms;

  --mx-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --mx-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --mx-ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Shadows ──────────────────────────────────────────────────────── */
  --mx-shadow-sm: 0 2px 8px rgba(69, 55, 93, 0.06);
  --mx-shadow-md: 0 8px 24px rgba(69, 55, 93, 0.10);
  --mx-shadow-lg: 0 20px 48px rgba(69, 55, 93, 0.14);
}