/* ==========================================================================
   BLOOM ESTÉTICA Y BELLEZA — TOKENS
   Única fuente de color, tipografía, ritmo y forma. Ningún valor de marca se
   escribe a pelo en una vista: si no está aquí, no existe.

   ROSA, NO TERRACOTA (28-08-2026). Lo pidió ella: «que la web esté más a una
   tonalidad rosada, como su tienda». Y tenía razón de origen: el terracota que
   había venía de un fondo de Canva puesto DETRÁS del logo. El logo real —el
   del escaparate— es dorado sobre negro, y su tienda tiene la butaca, el
   taburete y los globos rosas. Su tarjeta de Booksy, hecha por ella, va sobre
   un degradado melocotón-rosado: #F0C8A0, #DCB4A0, #F0B4A0.

   CÓMO SE ELIGIERON ESTOS VALORES: no a ojo. Se fija el tono (8 = rosa; el
   anterior era 19 = marrón) y para cada papel se BUSCA la claridad que cumple
   su contraste — midiéndolo contra --bl-arena, la superficie clara más oscura
   donde ese color puede caer, y no contra la crema. Derivarlo contra la crema
   es lo que dejaba 4,16:1 en cuanto el mismo texto se pintaba sobre una
   tarjeta de color.

   CONTRASTES REALES (calculados, no estimados):
     tinta    sobre crema/rubor/arena ... 15,04 / 13,92 / 12,00:1
     suave    sobre crema/rubor/arena ..... 5,65 / 5,23 / 4,51:1
     hondo    sobre crema/rubor/arena ..... 5,66 / 5,24 / 4,52:1
     profundo sobre crema/rubor/arena ..... 8,83 / 8,17 / 7,05:1
     blanco   sobre profundo .............. 9,51:1
     arena    sobre profundo .............. 7,05:1
     rosa     sobre crema ................. 3,00:1

   --bl-rosa es color de MARCA: superficies, filetes, la flor del logo y texto
   de 24 px para arriba. Nunca un párrafo, y nunca sobre fondo oscuro (2,94:1);
   ahí el acento es --bl-arena. Esto ya no es una advertencia teórica: el
   terracota se estaba usando para textos de 12-17 px (4,01:1) y en el pie
   sobre fondo oscuro (2,31:1, ilegible). Los cuatro casos van corregidos.
   ========================================================================== */

:root {
  /* ── Paleta. Ocho valores, ni uno más. ────────────────────────────────── */
  --bl-rosa:      #C97A6E;   /* marca: superficies, filetes y texto >=24px  */
  --bl-hondo:     #9E483B;   /* rosa legible: enlaces, antetítulos, 12px+   */
  --bl-profundo:  #71332A;   /* fondos oscuros y titulares                  */
  --bl-arena:     #EFD9D6;   /* bordes, superficies, y el acento en oscuro  */
  --bl-crema:     #FCF5F4;   /* fondo del sitio                             */
  --bl-blanco:    #FFFFFF;
  --bl-tinta:     #261F1E;   /* cuerpo de texto                             */
  --bl-suave:     #6E5F5C;   /* texto secundario                            */

  /* ── Roles sobre fondo CLARO (el default) ─────────────────────────────── */
  --bl-bg:        var(--bl-crema);
  --bl-surface:   var(--bl-blanco);
  --bl-text:      var(--bl-tinta);
  --bl-text-soft: var(--bl-suave);
  --bl-heading:   var(--bl-profundo);
  --bl-accent:    var(--bl-hondo);
  --bl-border:    var(--bl-arena);

  /* Sobre fondo OSCURO (.bl-seccion--oscura y el pie) el acento pasa a arena:
     hondo sobre profundo da 1,72:1 y rosa 2,94:1 — los dos ilegibles. */

  /* ── Tipografía ───────────────────────────────────────────────────────── */
  /* Display: didone de contraste alto, la familia del logo (serifas finas
     horizontales). Texto: geométrica de trazo ligero, que deja respirar. */
  --bl-font-display: 'Bodoni Moda', 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
  --bl-font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --bl-fs-body:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --bl-fs-lead:    clamp(1.1875rem, 1.05rem + 0.65vw, 1.4375rem);
  --bl-fs-small:   0.9375rem;
  --bl-fs-eyebrow: 0.75rem;
  --bl-fs-h1:      clamp(2.5rem, 1.5rem + 4.6vw, 5rem);
  --bl-fs-h2:      clamp(1.875rem, 1.35rem + 2.4vw, 3rem);
  --bl-fs-h3:      clamp(1.1875rem, 1.08rem + 0.6vw, 1.5rem);
  --bl-fs-precio:  clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);

  --bl-lh-body:      1.65;
  --bl-lh-display:   1.06;
  --bl-track-display: -0.015em;
  --bl-track-eyebrow: 0.2em;   /* el subtítulo del logo va muy abierto */

  /* ── Ritmo ────────────────────────────────────────────────────────────── */
  --bl-section-y: clamp(3.5rem, 8vw, 7rem);
  --bl-gutter:    clamp(1.25rem, 5vw, 2.5rem);
  --bl-max:       1240px;
  --bl-max-text:  68ch;
  --bl-gap:       clamp(1rem, 2.5vw, 2rem);

  /* ── Forma ────────────────────────────────────────────────────────────── */
  /* Casi sin redondeo: el logo es de trazo recto y serifas rectas. Un radio
     grande lo convertiría en otra marca. */
  --bl-radius:    2px;
  --bl-radius-img: 0;
  --bl-shadow:    0 1px 2px rgba(42, 35, 32, .04), 0 8px 24px rgba(42, 35, 32, .06);
  /* La misma sombra al reves: una barra pegada abajo tiene que separarse de
     lo que pasa POR DEBAJO de ella, no de lo que tiene encima. */
  --bl-shadow-alto: 0 -1px 2px rgba(42, 35, 32, .04), 0 -8px 24px rgba(42, 35, 32, .07);
  --bl-line:      1px solid var(--bl-border);
}

/* Modo oscuro del sistema: la web es de fondo claro por decisión de marca
   (una web de estética se lee como un catálogo impreso), pero respetamos
   quien lo pida a nivel de sistema suavizando el blanco puro, no invirtiendo. */
@media (prefers-color-scheme: dark) {
  :root {
    --bl-bg: #F7EDEB;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}