/* ============================================================
   Yupi Yei — Colors & Type
   La fiesta perfecta empieza aquí.
   ============================================================ */

/* ---------- Fonts ------------------------------------------------
   All three families served locally as variable fonts.
   No runtime Google Fonts dependency.
----------------------------------------------------------------- */
@font-face {
  font-family: 'Caveat';
  src: url('fonts/Caveat-VariableFont_wght.woff') format('woff'),
       url('fonts/Caveat-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-VariableFont_wght.woff') format('woff'),
       url('fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VariableFont.woff') format('woff'),
       url('fonts/Fraunces-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic-VariableFont.ttf') format('truetype-variations'),
       url('fonts/Fraunces-Italic-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Pastel palette
     Soft, dusty, paper-like. NOT neon, NOT highlighter.
     Each hue has three steps: tint (washes/backgrounds), base
     (primary surfaces), deep (text on tint, accents).
     ============================================================ */

  /* Rosa (the hero — birthdays, hearts, balloons) */
  --rosa-tint:  #FBE3EA;
  --rosa:       #F4B6C8;
  --rosa-deep:  #C36680;

  /* Verde (olive-sage — herbs, growth, calm) */
  --verde-tint: #E6EDD9;
  --verde:      #9FBDA2;
  --verde-deep: #506C52;

  /* Morado (lavanda, dreamy, ludoteca) */
  --morado-tint: #ECE3F4;
  --morado:      #C9B3E0;
  --morado-deep: #7A5BA8;

  /* Amarillo (golden — sun, celebration, attention) */
  --amarillo-tint: #FCEFC2;
  --amarillo:      #F8D741;
  --amarillo-deep: #9A7818;

  /* Azul (sky, trust, soft play) */
  --azul-tint: #DDEBF4;
  --azul:      #A8CBE0;
  --azul-deep: #4A82A6;

  /* ---------- Neutrals — warm, paper-like, never pure ---------- */
  --paper:        #FFFCF7;   /* primary surface */
  --cream:        #FBF6EE;   /* page background */
  --cream-deep:   #F2EADB;   /* alt section */
  --sand:         #E6DDC9;   /* divider, subtle border */

  --ink:          #2C2A28;   /* near-black, never pure */
  --ink-soft:     #4A4641;
  --muted:        #6B655D;   /* secondary text — darkened to meet WCAG AA (4.5:1) on cream/paper/tints */
  --whisper:      #B8B0A4;   /* tertiary text */

  /* ---------- Semantic ---------- */
  --bg:           var(--cream);
  --surface:      var(--paper);
  --surface-alt:  var(--cream-deep);
  --border:       var(--sand);
  --border-soft:  #EFE7D6;

  --fg:           var(--ink);
  --fg-soft:      var(--ink-soft);
  --fg-muted:     var(--muted);
  --fg-whisper:   var(--whisper);
  --fg-on-color:  var(--ink);   /* pastels are light → dark text */

  --brand:        var(--rosa);
  --brand-deep:   var(--rosa-deep);
  --brand-tint:   var(--rosa-tint);

  /* Semantic-feedback (still pastel — no alarming reds) */
  --success:      var(--verde-deep);
  --success-bg:   var(--verde-tint);
  --warning:      var(--amarillo-deep);
  --warning-bg:   var(--amarillo-tint);
  --info:         var(--azul-deep);
  --info-bg:      var(--azul-tint);
  --danger:       #C36680;            /* rosa-deep — gentle */
  --danger-bg:    var(--rosa-tint);

  /* WhatsApp (sales channel — teal deep, on-brand; bright reserved for stickers/FAB on social) */
  --whatsapp:        #0E7C6E;   /* primary — darkened from #128C7E so white button text meets WCAG AA */
  --whatsapp-bright: #25D366;   /* oficial brillante — solo para sticker / FAB en redes */
  --whatsapp-deep:   #075E54;   /* hover / texto sobre fondo whatsapp */

  /* ============================================================
     TYPE
     Three families, three jobs.
     - Caveat: handwritten accent, echoes the logo. Used SPARINGLY
       for headlines, stickers, "fiesta hecha con cariño" moments.
     - Fraunces: warm serif for editorial display headings.
       Optional — many systems will skip and go straight to Quicksand.
     - Quicksand: rounded sans for body + UI. Friendly, very legible.
       Rounded terminals match the logo's bouncy feel.
     ============================================================ */

  --font-hand:    'Caveat', 'Patrick Hand', 'Bradley Hand', 'Comic Sans MS', cursive;
  --font-display: 'Fraunces', 'Quicksand', Georgia, serif;
  --font-sans:    'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — generous, since the brand reads adult-soft */
  --fs-hand-xl: clamp(56px, 9vw, 128px);
  --fs-hand-lg: clamp(40px, 6vw, 72px);
  --fs-hand-md: 36px;

  --fs-display-xl: clamp(48px, 7vw, 84px);
  --fs-display-lg: clamp(36px, 5vw, 60px);
  --fs-display-md: 32px;

  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;

  --fs-body-lg: 19px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ============================================================
     SPACING / RADIUS / SHADOW
     Generous radii. Cards are pillowy, never sharp.
     Shadows are warm, low-spread, never hard.
     ============================================================ */

  --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;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --radius-blob: 62% 38% 55% 45% / 50% 60% 40% 50%;  /* organic shape */

  --shadow-xs: 0 1px 2px rgba(60, 40, 20, 0.04);
  --shadow-sm: 0 2px 6px rgba(60, 40, 20, 0.06);
  --shadow-md: 0 6px 18px rgba(60, 40, 20, 0.08);
  --shadow-lg: 0 14px 36px rgba(60, 40, 20, 0.10);
  --shadow-hover: 0 18px 44px rgba(195, 102, 128, 0.18);   /* warm rosa cast */
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Press state — subtle shrink + warmer shadow */
  --press-scale: 0.98;
  --hover-rise: -2px;

  /* Borders — most things use 1.5px, hand-drawn feel */
  --border-w: 1.5px;
  --border-w-bold: 2.5px;
}

/* ============================================================
   SEMANTIC ELEMENTS — drop these in and the brand is on
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--fg);
  background:  var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size:   var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size:   var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size:   var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 700;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size:   var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0;
}

.hand,
.handwritten {
  font-family: var(--font-hand);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.005em;
}

.hand-xl { font-family: var(--font-hand); font-weight: 600; font-size: var(--fs-hand-xl); line-height: 0.92; }
.hand-lg { font-family: var(--font-hand); font-weight: 600; font-size: var(--fs-hand-lg); line-height: 0.95; }
.hand-md { font-family: var(--font-hand); font-weight: 600; font-size: var(--fs-hand-md); line-height: 1.0; }

p, .body {
  font-family: var(--font-sans);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-soft);
  margin: 0;
  text-wrap: pretty;
}

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); letter-spacing: var(--tracking-wide); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--brand-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}
a:hover { color: var(--ink); }