/* ================================================
   BRAND BUSINESS — DESIGN TOKENS (LIGHT THEME)
   Single source of truth del sistema visual: todo color, sombra,
   espaciado o motion nuevo se declara acá, no en componentes.
   ================================================ */

:root {

    /* ════════════════════════════════════════════════
       1. PALETTE — Brand Business (matriz)
       ════════════════════════════════════════════════ */
    --bb-bg:            #ffffff;
    --bb-bg-soft:       #faf8f4;   /* off-white cálido */
    --bb-bg-warm:       #f4efe6;   /* crema más cálido */
    --bb-bg-dark:       #0f0f0f;   /* alias semántico de --bb-ink para fondos */

    --bb-ink:           #0f0f0f;
    --bb-ink-soft:      #2a2a2a;
    --bb-ink-muted:     #6b6b6b;
    --bb-ink-faint:     #a0a0a0;   /* placeholders, helper text muy sutiles */
    --bb-ink-invert:    #ffffff;   /* texto sobre fondo dark */

    --bb-gold-light:    #d4b06a;   /* sobre dark */
    --bb-gold:          #b08d3f;   /* base sobre claro */
    --bb-gold-dark:     #8a6a26;   /* italics editoriales, eyebrows */

    --bb-copper:        #8b5a2b;
    --bb-bronze:        #4a2c17;

    --bb-line:          rgba(15, 15, 15, 0.08);
    --bb-line-strong:   rgba(15, 15, 15, 0.18);
    --bb-line-dark:     rgba(255, 255, 255, 0.18);   /* sobre fondos oscuros */
    --bb-line-faint:    rgba(255, 255, 255, 0.06);

    /* ════════════════════════════════════════════════
       2. PALETTE — Marcas hijas: base + dark (hover/text) + soft (fondos)
       ════════════════════════════════════════════════ */
    --cocodinus:        #e8632a;
    --cocodinus-dark:   #b84818;
    --cocodinus-soft:   #fdf3ee;

    --dubtech:          #6b3fa0;
    --dubtech-dark:     #452866;
    --dubtech-soft:     #f5f1fa;

    --viajante:         #2bb8d4;
    --viajante-dark:    #1a8aa0;
    --viajante-soft:    #ecf8fb;

    /* ════════════════════════════════════════════════
       3. ACCENT DINÁMICO — default Brand Business (negro + dorado);
       body[data-brand="..."] lo sobreescribe con la paleta de la marca.
       ════════════════════════════════════════════════ */
    --bb-accent:        var(--bb-ink);
    --bb-accent-dark:   var(--bb-gold-dark);
    --bb-accent-soft:   var(--bb-bg-soft);
    --bb-accent-text:   #ffffff;        /* texto sobre el accent fill */

    /* ════════════════════════════════════════════════
       4. PALETTE — Partners
       ════════════════════════════════════════════════ */
    --dhl-red:          #d40511;
    --dhl-yellow:       #ffcc00;

    --pagopar-ink:      var(--bb-gold-dark);   /* matchea identidad institucional */

    /* ════════════════════════════════════════════════
       5. STATUS COLORS — feedback semántico (tracking, alerts,
       validación de forms, badges de estado de pedido)
       ════════════════════════════════════════════════ */
    --bb-success:       #2e7d59;
    --bb-success-soft:  #e8f4ed;
    --bb-warning:       #b67c1f;
    --bb-warning-soft:  #fdf3e0;
    --bb-error:         #b8341c;
    --bb-error-soft:    #fbeae6;
    --bb-info:          #2a6ca8;
    --bb-info-soft:     #e8f0f7;

    --bb-star:          #c8a04b;        /* rating estrellas activas */

    /* ════════════════════════════════════════════════
       6. TIPOGRAFÍA
       ════════════════════════════════════════════════ */
    --font-display:     'Cormorant Garamond', 'Times New Roman', serif;
    --font-body:        'Manrope', -apple-system, sans-serif;

    --fs-eyebrow:       0.7rem;
    --fs-body:          1rem;
    --fs-small:         0.85rem;
    --fs-tiny:          0.7rem;

    --ls-uppercase:     0.22em;     /* el "espaciado editorial" estándar */
    --ls-tight:         -0.02em;    /* para títulos display grandes */

    /* ════════════════════════════════════════════════
       7. ESPACIADO
       ════════════════════════════════════════════════ */
    --section-y:        clamp(4rem, 8vw, 7rem);
    --container-pad:    1.25rem;
    --gap-card:         1.5rem;     /* gap estándar entre cards en grid */

    /* ════════════════════════════════════════════════
       8. SOMBRAS — escala consistente, reusar antes de crear nuevas
       ════════════════════════════════════════════════ */
    --bb-shadow-sm:     0 4px 12px -4px rgba(15, 15, 15, 0.08);
    --bb-shadow:        0 10px 30px -10px rgba(15, 15, 15, 0.15);
    --bb-shadow-md:     0 14px 32px -12px rgba(15, 15, 15, 0.18);
    --bb-shadow-lg:     0 20px 40px -20px rgba(15, 15, 15, 0.18);
    --bb-shadow-xl:     0 30px 60px -30px rgba(15, 15, 15, 0.22);
    --bb-shadow-cta:    0 10px 28px -10px rgba(15, 15, 15, 0.22);
    --bb-shadow-cta-hover: 0 16px 36px -12px rgba(15, 15, 15, 0.32);
    --bb-shadow-modal:  0 40px 80px -20px rgba(15, 15, 15, 0.4);

    /* ════════════════════════════════════════════════
       9. MOTION
       ════════════════════════════════════════════════ */
    --bb-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --bb-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:         0.2s;
    --dur:              0.3s;
    --dur-slow:         0.6s;
    --dur-xslow:        0.8s;

    /* ════════════════════════════════════════════════
      10. FORMS — estilo boxed. Los inputs hero (search, newsletter,
       tracking, coupon) usan border-bottom-only en components.css.
       ════════════════════════════════════════════════ */
    --bb-input-bg:          #ffffff;
    --bb-input-bg-disabled: var(--bb-bg-soft);
    --bb-input-border:      var(--bb-line-strong);
    --bb-input-border-hover:var(--bb-ink-muted);
    --bb-input-border-on:   var(--bb-ink);          /* focus */
    --bb-input-border-error:var(--bb-error);
    --bb-input-text:        var(--bb-ink);
    --bb-input-placeholder: var(--bb-ink-faint);
    --bb-input-padding:     0.85rem 1rem;            /* boxed siempre */
    --bb-input-radius:      0;                        /* esquinas vivas */

    --bb-focus-ring:        0 0 0 3px rgba(176, 141, 63, 0.18); /* dorado sutil */
    --bb-focus-ring-error:  0 0 0 3px rgba(184, 52, 28, 0.18);

    --bb-label-text:        var(--bb-ink);           /* más contraste que muted */
    --bb-label-size:        0.72rem;
    --bb-label-weight:      700;

    --bb-checkbox-size:     20px;                     /* un poquito más grande */
    --bb-checkbox-border:   var(--bb-ink);

    /* ════════════════════════════════════════════════
      11. RADII — "esquinas vivas": solo circulares (avatar, dot, pill)
       ════════════════════════════════════════════════ */
    --bb-radius:        0;
    --bb-radius-pill:   999px;
    --bb-radius-circle: 50%;

    /* ════════════════════════════════════════════════
      12. Z-INDEX SCALE
       ════════════════════════════════════════════════ */
    --bb-z-base:        1;
    --bb-z-dropdown:    1000;
    --bb-z-sticky:      1020;
    --bb-z-navbar:      1030;
    --bb-z-fixed:       1040;
    --bb-z-modal:       1050;
    --bb-z-popover:     1070;
    --bb-z-toast:       1080;
}

/* ════════════════════════════════════════════════
   ACCENT THEMING — el color de cada marca vive en la BASE (`marcas.color_hex`) y lo
   edita el operador desde el panel. `Marca::estiloDeMarca()` lo emite como variables
   CSS en el <body> (ver front/master.blade.php), así todo componente que use
   var(--bb-accent) se tiñe solo.

   Antes los tres colores estaban acá, bajo `body[data-brand="..."]`, pero el atributo
   se ponía en un <div> interno: el selector nunca coincidía y las landings quedaban con
   el acento negro por defecto. Además forzaban texto blanco en las tres, ilegible sobre
   el celeste de Viajante; ahora el color de texto se calcula por luminancia.
   ════════════════════════════════════════════════ */