@charset "UTF-8";
/* ============================================================
   Marina Sabatino — Colors & Type
   Warm professional cosmetology · Bordó + rosa · Cuidadora/Sabia
   ============================================================ */

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

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Bordó — the anchor. Madurez, sofisticación, autoridad cálida. */
  --bordeaux-900: #3A1219;   /* near-black bordó, text on cream */
  --bordeaux-800: #561823;   /* deep primary */
  --bordeaux-700: #6E1E2C;   /* primary — logos, CTAs */
  --bordeaux-600: #8A2838;   /* hover/active lift */
  --bordeaux-500: #A93A4C;   /* accent, links */
  --bordeaux-400: #C66475;   /* muted bordó, decorative */

  /* Rosa suave — feminidad sin infantilismo */
  --rose-50:  #FBF4F1;       /* page wash, cream-rose */
  --rose-100: #F6E8E3;       /* cards, soft surfaces */
  --rose-200: #EFD5CE;       /* borders, chips */
  --rose-300: #E4BAB1;       /* decorative */
  --rose-400: #D39A8F;       /* dusty rose accent */
  --rose-500: #B87A70;       /* muted terracotta rose */

  /* Neutrales cálidos — nunca grises fríos */
  --cream-50:  #FDFBF8;      /* page bg, default */
  --cream-100: #F7F2EC;      /* elevated surface */
  --cream-200: #EDE5DB;      /* dividers */
  --warm-300:  #CFC3B4;      /* muted type */
  --warm-500:  #8B7F72;      /* secondary text */
  --warm-700:  #57504A;      /* body alt */
  --ink-900:   #2A1F1C;      /* body text (cálido, no negro puro) */

  /* Acentos finos — usar con criterio */
  --gold-500:  #B08A4A;      /* detalles, línea dorada */
  --gold-300:  #D8B880;

  /* ---------- SEMANTIC — FOREGROUND ---------- */
  --fg-1: var(--ink-900);          /* primary text */
  --fg-2: var(--warm-700);         /* body secondary */
  --fg-3: var(--warm-500);         /* muted, captions */
  --fg-inverse: var(--cream-50);   /* text on bordó */
  --fg-brand: var(--bordeaux-700); /* branded accents, logo */
  --fg-link: var(--bordeaux-600);

  /* ---------- SEMANTIC — BACKGROUND ---------- */
  --bg-page: var(--cream-50);
  --bg-surface: #FFFFFF;
  --bg-elevated: var(--cream-100);
  --bg-muted: var(--rose-50);
  --bg-brand: var(--bordeaux-700);
  --bg-brand-soft: var(--rose-100);

  /* ---------- SEMANTIC — BORDER ---------- */
  --border-hair: rgba(58, 18, 25, 0.08);  /* very fine bordó tint */
  --border-soft: var(--rose-200);
  --border-strong: var(--warm-300);
  --border-brand: var(--bordeaux-700);

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-serif: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-hand: 'Caveat', 'Brush Script MT', cursive;

  /* ---------- TYPE SCALE ---------- */
  /* Display: serif, italic opcional, tracking apretado */
  --display-xl: 300 72px/1.02 var(--font-serif);
  --display-lg: 300 56px/1.05 var(--font-serif);
  --display-md: 400 44px/1.08 var(--font-serif);

  --h1: 400 36px/1.15 var(--font-serif);
  --h2: 400 28px/1.2 var(--font-serif);
  --h3: 500 22px/1.3 var(--font-sans);
  --h4: 500 18px/1.35 var(--font-sans);

  --body-lg: 400 18px/1.55 var(--font-sans);
  --body:    400 16px/1.55 var(--font-sans);
  --body-sm: 400 14px/1.5 var(--font-sans);
  --caption: 500 12px/1.4 var(--font-sans);

  --eyebrow: 500 11px/1.2 var(--font-sans); /* tracking +0.18em, uppercase */
  --signature: 500 28px/1 var(--font-hand);

  /* ---------- SPACING (base 4) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (warm, soft, nunca negras) ---------- */
  --shadow-xs: 0 1px 2px rgba(58, 18, 25, 0.04);
  --shadow-sm: 0 2px 6px rgba(58, 18, 25, 0.06), 0 1px 2px rgba(58, 18, 25, 0.04);
  --shadow-md: 0 8px 24px rgba(58, 18, 25, 0.08), 0 2px 6px rgba(58, 18, 25, 0.05);
  --shadow-lg: 0 20px 48px rgba(58, 18, 25, 0.12), 0 6px 14px rgba(58, 18, 25, 0.06);
  --shadow-inset-hair: inset 0 0 0 1px var(--border-hair);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */

html, body {
  font: var(--body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--h1); letter-spacing: -0.01em; color: var(--fg-1); }
h2 { font: var(--h2); letter-spacing: -0.005em; color: var(--fg-1); }
h3 { font: var(--h3); color: var(--fg-1); }
h4 { font: var(--h4); color: var(--fg-1); }

p { font: var(--body); color: var(--fg-2); text-wrap: pretty; max-width: 62ch; }

small, .caption { font: var(--caption); color: var(--fg-3); }

a { color: var(--fg-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bordeaux-800); }

.eyebrow {
  font: var(--eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bordeaux-500);
}

.display-xl { font: var(--display-xl); letter-spacing: -0.02em; }
.display-lg { font: var(--display-lg); letter-spacing: -0.015em; }
.display-md { font: var(--display-md); letter-spacing: -0.01em; }

.signature { font: var(--signature); color: var(--bordeaux-700); }

em, .italic-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }