/* ─────────────────────────────────────────────────────────────────
   Alexandra Castro Pastelería Boutique — Sistema de tokens
   Editorial · maison · ciruela como firma.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Color: lienzo ──────────────────────────────────────────── */
  --cream:        #FBF7F1;   /* fondo base — marfil cálido */
  --cream-2:      #F4EDE2;   /* fondo de bloque, sección alterna */
  --cream-3:      #ECE3D2;   /* divisor más cálido */

  /* ── Color: tinta ───────────────────────────────────────────── */
  --ink:          #2A2320;   /* texto base (no negro puro) */
  --ink-soft:     #5B504A;   /* texto secundario */
  --ink-mute:     #8A7F77;   /* texto auxiliar / leyendas */

  /* ── Color: firma (ciruela + lavanda) ───────────────────────── */
  --plum:         #8C6FAE;   /* color firma (lila de marca) — botones primarios */
  --plum-deep:    #6F548D;   /* lila más hondo — hover/peso */
  --lavender:     #A98FCB;   /* lila variante clara */
  --lila:         #D4C1F0;   /* lila claro original — tinte, hover */
  --lila-dark:    #8E6DB1;   /* lila medio original — acento secundario */
  --lila-tint:    #EDE5F5;   /* tinte muy sutil — fondos */

  /* ── Color: acentos cálidos ─────────────────────────────────── */
  --gold:         #C5A04D;   /* dorado del logo — filete, marcos finos */
  --gold-light:   #E0C588;   /* dorado claro — hover/detalle */
  --gold-dark:    #9C7E3B;   /* dorado profundo — texto sobre crema */
  --rose:         #E8C8C8;   /* rosa empolvado — acento puntual */
  --rose-soft:    #F4DEDE;   /* rosa empolvado claro */
  --menta:        #E8F9E7;   /* menta — sello de body.brunch-mode */
  --menta-deep:   #5A7F58;   /* menta oscuro — tinta en brunch-mode */

  /* ── Hairlines / bordes finos ───────────────────────────────── */
  --hairline:        rgba(197, 160, 77, 0.32);     /* filete dorado */
  --hairline-strong: rgba(197, 160, 77, 0.55);
  --hairline-ink:    rgba(42, 35, 32, 0.10);
  --hairline-ink-strong: rgba(42, 35, 32, 0.18);
  --hairline-px:     0.5px;

  /* ── Estado funcional ───────────────────────────────────────── */
  --success:      #5A7F58;
  --warning:      #B8842A;
  --error:        #A04848;
  --info:         #5C7A9C;

  /* ── Tipografía ─────────────────────────────────────────────── */
  --serif-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --serif-body:    'EB Garamond', Georgia, serif;
  --sans:          'Jost', 'Mulish', ui-sans-serif, system-ui, sans-serif;
  --sans-precise:  'Mulish', 'Jost', ui-sans-serif, system-ui, sans-serif;
  --script:        'Pinyon Script', 'Allura', cursive;

  /* Escala de tipo */
  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  44px;
  --t-4xl:  60px;
  --t-5xl:  84px;
  --t-6xl:  120px;

  /* Tracking versalitas */
  --track-xs: 0.06em;
  --track-sm: 0.12em;
  --track-md: 0.18em;
  --track-lg: 0.28em;
  --track-xl: 0.42em;

  /* Pesos */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;

  /* Line-heights */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.45;
  --lh-relaxed:  1.65;

  /* ── Espaciado (escala armónica) ────────────────────────────── */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-12: 200px;

  /* Densidad de la carta (afectado por tweak) */
  --density-card-pad-y: 28px;
  --density-card-pad-x: 24px;
  --density-row-pad-y:  22px;
  --density-section-pad: 96px;

  /* ── Radios (mínimos, recta = fina) ─────────────────────────── */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-pill: 999px;

  /* ── Transiciones suaves ────────────────────────────────────── */
  --ease-soft:  cubic-bezier(0.32, 0.72, 0.32, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:     140ms;
  --t-base-d:   240ms;
  --t-slow:     420ms;

  /* ── Layout ─────────────────────────────────────────────────── */
  --max-w:      1280px;
  --max-w-text: 720px;
  --gutter:     24px;
  --nav-h:      72px;

  /* Z-index */
  --z-nav:    50;
  --z-fab:    80;
  --z-modal:  100;
  --z-toast:  120;
}

/* ── Modo Brunch ───────────────────────────────────────────────────
   body.brunch-mode hace un swap del color firma de ciruela → menta
   profunda. Mantiene la jerarquía y el sistema; solo cambia el sello.
   ──────────────────────────────────────────────────────────────── */
body.brunch-mode {
  --plum:         #5A7F58;     /* el sello firma se vuelve verde menta hondo */
  --plum-deep:    #3F5C3E;
  --lavender:     #76A074;
  --lila-tint:    #F0F8EF;
  --cream-2:      #F2F6E9;     /* fondo de bloque toma matiz menta */
  --rose:         #E8F0D9;
  --gold:         #B6963F;
  --hairline:        rgba(182, 150, 63, 0.32);
  --hairline-strong: rgba(182, 150, 63, 0.55);
}

/* ── Tweak: oro on/off ─────────────────────────────────────────── */
body.no-gold {
  --gold:        var(--ink-soft);
  --gold-light:  var(--ink-mute);
  --gold-dark:   var(--ink);
  --hairline:        rgba(42, 35, 32, 0.18);
  --hairline-strong: rgba(42, 35, 32, 0.32);
}

/* ── Tweak: densidad ───────────────────────────────────────────── */
body.density-compact {
  --density-card-pad-y: 16px;
  --density-card-pad-x: 18px;
  --density-row-pad-y:  14px;
  --density-section-pad: 56px;
}
body.density-airy {
  --density-card-pad-y: 40px;
  --density-card-pad-x: 32px;
  --density-row-pad-y:  32px;
  --density-section-pad: 140px;
}

/* ── Tweak: display font ───────────────────────────────────────── */
body.display-dm {
  --serif-display: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
}
body.display-italiana {
  --serif-display: 'Italiana', 'Cormorant Garamond', Georgia, serif;
}
body.display-playfair {
  --serif-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
}