/* ============================================================
   Dra. Mariana Martins — Foundations
   Colors, typography, spacing, radius, shadows
   ============================================================ */

/* Local brand fonts — DM Serif Display + DM Sans
   Files live in /fonts/. DM Sans is a variable font (opsz + wght). */
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand palette ---------- */
  --dm-bg:            #F7EFEA;  /* warm off-white — primary background */
  --dm-nude:          #D3B0A7;  /* soft nude — secondary surface */
  --dm-rose:          #B9847D;  /* rosé queimado — main accent */
  --dm-taupe:         #9B8B84;  /* taupe rosado — muted neutral */
  --dm-graphite:      #463D38;  /* marrom grafite — main text */

  /* ---------- Derived tones (tonal variations only — same hues) ---------- */
  --dm-bg-deep:       #F0E4DC;  /* one step deeper than bg, for card bg */
  --dm-bg-soft:       #FBF6F2;  /* one step lighter than bg, for highlights */
  --dm-nude-soft:     #E6CFC6;  /* lighter nude for hover surfaces */
  --dm-nude-deep:     #C29A90;  /* darker nude for press states */
  --dm-rose-soft:     #C99B95;  /* rose tint for hover */
  --dm-rose-deep:     #A06F68;  /* rose deep for press / focus */
  --dm-taupe-soft:    #B8ABA4;  /* lighter taupe for hairline borders */
  --dm-graphite-soft: #6B605A;  /* secondary text */

  /* ---------- Semantic surfaces ---------- */
  --dm-surface:        var(--dm-bg);
  --dm-surface-raised: #FFFFFF;
  --dm-surface-sunken: var(--dm-bg-deep);
  --dm-surface-nude:   var(--dm-nude);
  --dm-surface-nude-soft: var(--dm-nude-soft);

  /* ---------- Semantic text ---------- */
  --dm-text:           var(--dm-graphite);
  --dm-text-muted:     var(--dm-graphite-soft);
  --dm-text-soft:      var(--dm-taupe);
  --dm-text-on-rose:   #FBF6F2;
  --dm-text-on-nude:   var(--dm-graphite);

  /* ---------- Semantic accents ---------- */
  --dm-accent:         var(--dm-rose);
  --dm-accent-hover:   var(--dm-rose-deep);
  --dm-accent-soft:    var(--dm-rose-soft);

  /* ---------- Borders & dividers ---------- */
  --dm-border:         rgba(70, 61, 56, 0.10);   /* graphite 10% */
  --dm-border-strong:  rgba(70, 61, 56, 0.20);
  --dm-border-nude:    rgba(185, 132, 125, 0.30);
  --dm-hairline:       var(--dm-taupe-soft);

  /* ---------- WhatsApp brand (for CTA only) ---------- */
  --dm-whatsapp:       #25D366;
  --dm-whatsapp-deep:  #1FAE52;

  /* ---------- Typography families ---------- */
  --dm-font-display: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --dm-font-sans:    'DM Sans', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

  /* ---------- Type scale (display) ---------- */
  --dm-display-1: 4.5rem;     /* 72px — hero */
  --dm-display-2: 3.5rem;     /* 56px */
  --dm-display-3: 2.75rem;    /* 44px */
  --dm-h1:        2.25rem;    /* 36px */
  --dm-h2:        1.75rem;    /* 28px */
  --dm-h3:        1.375rem;   /* 22px */
  --dm-h4:        1.125rem;   /* 18px */

  /* ---------- Type scale (sans) ---------- */
  --dm-body-lg:   1.0625rem;  /* 17px */
  --dm-body:      1rem;       /* 16px */
  --dm-body-sm:   0.9375rem;  /* 15px */
  --dm-caption:   0.8125rem;  /* 13px */
  --dm-micro:     0.6875rem;  /* 11px — uppercase eyebrows */

  /* ---------- Line heights ---------- */
  --dm-lh-display: 1.05;
  --dm-lh-heading: 1.2;
  --dm-lh-body:    1.55;
  --dm-lh-tight:   1.3;

  /* ---------- Letter spacing ---------- */
  --dm-tracking-display: -0.01em;
  --dm-tracking-tight:   -0.005em;
  --dm-tracking-normal:  0;
  --dm-tracking-eyebrow: 0.18em;   /* uppercase eyebrows */
  --dm-tracking-button:  0.04em;

  /* ---------- Weights ---------- */
  --dm-w-light:   300;
  --dm-w-regular: 400;
  --dm-w-medium:  500;
  --dm-w-semi:    600;

  /* ---------- Spacing scale (4px base) ---------- */
  --dm-space-1: 0.25rem;   /*  4 */
  --dm-space-2: 0.5rem;    /*  8 */
  --dm-space-3: 0.75rem;   /* 12 */
  --dm-space-4: 1rem;      /* 16 */
  --dm-space-5: 1.25rem;   /* 20 */
  --dm-space-6: 1.5rem;    /* 24 */
  --dm-space-8: 2rem;      /* 32 */
  --dm-space-10: 2.5rem;   /* 40 */
  --dm-space-12: 3rem;     /* 48 */
  --dm-space-16: 4rem;     /* 64 */
  --dm-space-20: 5rem;     /* 80 */
  --dm-space-24: 6rem;     /* 96 */

  /* ---------- Radii ---------- */
  --dm-radius-xs:  4px;
  --dm-radius-sm:  8px;
  --dm-radius-md:  14px;
  --dm-radius-lg:  20px;
  --dm-radius-xl:  28px;
  --dm-radius-2xl: 40px;
  --dm-radius-pill: 999px;

  /* ---------- Shadows (warm, never blue/cool) ---------- */
  --dm-shadow-xs: 0 1px 2px rgba(70, 61, 56, 0.04);
  --dm-shadow-sm: 0 2px 6px rgba(70, 61, 56, 0.05), 0 1px 2px rgba(70, 61, 56, 0.04);
  --dm-shadow-md: 0 6px 18px rgba(70, 61, 56, 0.07), 0 2px 6px rgba(70, 61, 56, 0.04);
  --dm-shadow-lg: 0 14px 36px rgba(70, 61, 56, 0.09), 0 4px 10px rgba(70, 61, 56, 0.05);
  --dm-shadow-xl: 0 26px 60px rgba(70, 61, 56, 0.12), 0 6px 16px rgba(70, 61, 56, 0.06);
  --dm-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---------- Motion ---------- */
  --dm-ease:       cubic-bezier(0.22, 1, 0.36, 1);     /* gentle ease-out */
  --dm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dm-dur-fast:   140ms;
  --dm-dur-base:   220ms;
  --dm-dur-slow:   420ms;

  /* ---------- Layout ---------- */
  --dm-container:  1200px;
  --dm-container-narrow: 880px;
}

/* ============================================================
   Element defaults (semantic styles)
   Scoped — add `.dm` to a root element or use these vars directly.
   ============================================================ */

.dm,
.dm * {
  box-sizing: border-box;
}

.dm {
  background: var(--dm-bg);
  color: var(--dm-text);
  font-family: var(--dm-font-sans);
  font-size: var(--dm-body);
  line-height: var(--dm-lh-body);
  font-weight: var(--dm-w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dm h1, .dm .dm-h1,
.dm h2, .dm .dm-h2,
.dm h3, .dm .dm-h3 {
  font-family: var(--dm-font-display);
  font-weight: var(--dm-w-regular);
  color: var(--dm-text);
  letter-spacing: var(--dm-tracking-display);
  line-height: var(--dm-lh-heading);
  margin: 0;
  text-wrap: balance;
}

.dm h1, .dm .dm-h1 { font-size: var(--dm-h1); line-height: var(--dm-lh-display); }
.dm h2, .dm .dm-h2 { font-size: var(--dm-h2); }
.dm h3, .dm .dm-h3 { font-size: var(--dm-h3); }

.dm h4, .dm .dm-h4,
.dm h5, .dm h6 {
  font-family: var(--dm-font-sans);
  font-weight: var(--dm-w-medium);
  letter-spacing: var(--dm-tracking-tight);
  margin: 0;
}
.dm h4, .dm .dm-h4 { font-size: var(--dm-h4); }

.dm .dm-display-1 { font-family: var(--dm-font-display); font-weight: 400; font-size: var(--dm-display-1); line-height: var(--dm-lh-display); letter-spacing: var(--dm-tracking-display); }
.dm .dm-display-2 { font-family: var(--dm-font-display); font-weight: 400; font-size: var(--dm-display-2); line-height: var(--dm-lh-display); letter-spacing: var(--dm-tracking-display); }
.dm .dm-display-3 { font-family: var(--dm-font-display); font-weight: 400; font-size: var(--dm-display-3); line-height: var(--dm-lh-display); letter-spacing: var(--dm-tracking-display); }

.dm p, .dm .dm-p {
  margin: 0;
  font-size: var(--dm-body);
  line-height: var(--dm-lh-body);
  color: var(--dm-text);
  text-wrap: pretty;
}

.dm .dm-lead {
  font-size: var(--dm-body-lg);
  line-height: var(--dm-lh-body);
  color: var(--dm-text-muted);
}

.dm .dm-caption {
  font-size: var(--dm-caption);
  color: var(--dm-text-soft);
  line-height: 1.45;
}

.dm .dm-eyebrow {
  font-size: var(--dm-micro);
  text-transform: uppercase;
  letter-spacing: var(--dm-tracking-eyebrow);
  color: var(--dm-text-soft);
  font-weight: var(--dm-w-medium);
}

.dm .dm-quote {
  font-family: var(--dm-font-display);
  font-style: italic;
  font-size: var(--dm-h2);
  line-height: var(--dm-lh-heading);
  color: var(--dm-text);
}

/* Selection */
.dm ::selection { background: var(--dm-rose-soft); color: var(--dm-graphite); }