/* =====================================================================
   Ateliê da Costura — Colors & Type
   Elevated, editorial design system rooted in the brand's pink + script
   logo. Replaces the emoji-heavy original with a refined atelier palette:
   warm ivories, deep mulberry, soft blush, with Cormorant + Inter type.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=Italianno&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- BRAND COLOR PALETTE ---------- */

  /* Primary — derived from logo's magenta-pink, deepened for elegance */
  --brand-mulberry: #8E2C5C;        /* deep, refined primary */
  --brand-rose: #C44878;            /* the existing logo pink */
  --brand-rose-soft: #E89AB5;       /* lighter accent */
  --brand-blush: #F7E6EC;           /* tinted surface */
  --brand-petal: #FBF1F4;           /* the lightest tinted bg */

  /* Neutrals — warm, atelier-paper feel (not stark white, not cool gray) */
  --ivory-50: #FBF8F5;              /* page background */
  --ivory-100: #F5F0EA;             /* card surface */
  --ivory-200: #ECE4DB;             /* divider tint */
  --ivory-300: #D9CFC2;             /* subtle border */
  --linen-400: #B0A496;             /* muted text */
  --linen-500: #8A7D6E;             /* secondary text */
  --ink-700: #4A3F35;               /* body text — warm dark */
  --ink-800: #2E2620;               /* heading text */
  --ink-900: #1C1611;               /* deepest, near-black */

  /* Pure tones for contrast */
  --paper: #FFFFFF;
  --noir: #14100C;

  /* Semantic — used sparingly */
  --success: #5C7A5A;               /* sage, never a vivid green */
  --warning: #B8893A;               /* warm amber */
  --danger:  #A13838;               /* muted brick */

  /* ---------- FOREGROUND / BACKGROUND TOKENS ---------- */
  --fg-1: var(--ink-900);           /* headings, max contrast */
  --fg-2: var(--ink-700);           /* body text */
  --fg-3: var(--linen-500);         /* secondary, captions */
  --fg-4: var(--linen-400);         /* tertiary, hints */
  --fg-on-dark: var(--ivory-50);
  --fg-on-brand: var(--paper);

  --bg-page: var(--ivory-50);       /* the canvas */
  --bg-surface: var(--paper);       /* elevated cards */
  --bg-tint: var(--ivory-100);      /* subtle alt section */
  --bg-blush: var(--brand-petal);   /* feminine, soft section */
  --bg-noir: var(--ink-900);        /* footer, dark moments */

  --border-hairline: rgba(28, 22, 17, 0.08);
  --border-soft: var(--ivory-200);
  --border-strong: var(--ivory-300);

  /* ---------- TYPOGRAPHY ---------- */

  /* Families
     - Display: Cormorant Garamond (editorial serif, atelier/couture feel)
     - Body: Inter (clean, neutral, professional)
     - Script: Italianno (substitute for the logo's script — used SPARINGLY for accent words)
     - Mono: JetBrains Mono (technical labels, prices)
  */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Italianno", "Allura", "Pinyon Script", cursive;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — editorial/print-feel, generous */
  --text-2xs: 0.6875rem;   /* 11 — micro labels */
  --text-xs:  0.75rem;     /* 12 — eyebrow */
  --text-sm:  0.875rem;    /* 14 — captions */
  --text-base:1rem;        /* 16 — body */
  --text-md:  1.125rem;    /* 18 — lead body */
  --text-lg:  1.375rem;    /* 22 */
  --text-xl:  1.75rem;     /* 28 — h4 */
  --text-2xl: 2.25rem;     /* 36 — h3 */
  --text-3xl: 3rem;        /* 48 — h2 */
  --text-4xl: 4rem;        /* 64 — h1 */
  --text-5xl: 5.5rem;      /* 88 — display hero */

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

  /* Letter-spacing & line-height */
  --tracking-tight: -0.02em;        /* big display */
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.22em;        /* eyebrows, all-caps labels */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* ---------- SPACING (8pt base, with refined offsets) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ---------- RADII — restrained, editorial (NOT pillowy) ---------- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(28, 22, 17, 0.04);
  --shadow-sm: 0 2px 8px rgba(28, 22, 17, 0.05), 0 1px 2px rgba(28, 22, 17, 0.04);
  --shadow-md: 0 8px 24px rgba(28, 22, 17, 0.07), 0 2px 6px rgba(28, 22, 17, 0.04);
  --shadow-lg: 0 24px 60px rgba(28, 22, 17, 0.10), 0 4px 12px rgba(28, 22, 17, 0.05);
  --shadow-glow: 0 0 0 4px rgba(196, 72, 120, 0.12);

  /* ---------- TRANSITIONS — slow, refined (atelier ≠ snappy) ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1240px;
  --container-narrow: 880px;
  --container-text: 680px;
}

/* =====================================================================
   SEMANTIC TYPE STYLES
   Apply with class names OR target raw tags inside .ds-prose
   ===================================================================== */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-mulberry);
  line-height: 1;
}

.h-display {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, var(--text-5xl));
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--fg-1);
}

.h-display .accent-script {
  font-family: var(--font-script);
  font-size: 1.4em;
  font-weight: var(--weight-regular);
  color: var(--brand-rose);
  letter-spacing: 0;
  display: inline-block;
  line-height: 0.7;
  vertical-align: -0.05em;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--fg-3);
  line-height: var(--leading-normal);
}

.micro {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}

.script-flourish {
  font-family: var(--font-script);
  font-size: var(--text-3xl);
  color: var(--brand-rose);
  font-weight: var(--weight-regular);
  line-height: 1;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--ivory-100);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--ink-800);
}

/* Decorative rule used between sections — a thin line + small diamond */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--brand-rose);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ivory-300);
  max-width: 80px;
}
.divider-mark {
  width: 6px;
  height: 6px;
  background: var(--brand-rose);
  transform: rotate(45deg);
}