/* Identidad de la marca BarberSoftRD (landing de "/"). Son tokens propios de la marca: no tocan
   --custom-primary-color, que pertenece a cada negocio. Los componentes del landing solo leen --bsrd-*.
   La paleta es neutra a propósito (se identifican hombres y mujeres): fondo grafito y acento marrón cobre. */

:root {
    /* Color: fondo grafito neutro, crema y un marrón cobre derivado de #361d0d (mismo tono, más claro para verse
       sobre el fondo). Contrastes sobre los tres fondos: texto ≥ 9.6, texto secundario ≥ 6.5, acento ≥ 4.7
       (AA pide 4.5), texto oscuro sobre el acento ≥ 5.9; --bsrd-line-strong ≥ 3 en el borde de los controles. */
    --bsrd-ink: #151518;
    --bsrd-surface: #1d1d21;
    --bsrd-surface-raised: #27272c;
    --bsrd-line: #3b3b42;
    --bsrd-line-strong: #6e6e78;
    --bsrd-cream: #f3ebe0;
    --bsrd-cream-muted: #a8a8b0;
    --bsrd-copper: #cb7e4d;
    --bsrd-copper-strong: #d9966c;
    --bsrd-on-copper: #1f1208;
    --bsrd-danger: #f08a84;
    --bsrd-ok: #7ad39a;
    --bsrd-warn: #e6b85c;

    /* Tipografía: las dos familias locales de fonts.css. */
    --bsrd-font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --bsrd-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

    --bsrd-text-sm: 0.875rem;
    --bsrd-text-base: 1rem;
    --bsrd-text-lg: 1.1875rem;
    --bsrd-text-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    --bsrd-display-md: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    /* Tamaño de todos los títulos de sección (h2): una sola medida para que ninguno pese más que otro. */
    --bsrd-title-section: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
    --bsrd-display-xl: clamp(3.25rem, 2rem + 6vw, 7rem);

    /* Espaciado, radios, sombras, movimiento. */
    --bsrd-space-1: 0.25rem;
    --bsrd-space-2: 0.5rem;
    --bsrd-space-3: 0.75rem;
    --bsrd-space-4: 1rem;
    --bsrd-space-6: 1.5rem;
    --bsrd-space-8: 2rem;
    --bsrd-space-12: 3rem;
    --bsrd-space-20: 5rem;
    --bsrd-section-y: clamp(4rem, 3rem + 5vw, 8rem);
    --bsrd-gutter: clamp(1rem, 0.5rem + 3vw, 3rem);
    --bsrd-max-width: 76rem;

    --bsrd-radius-sm: 6px;
    --bsrd-radius-md: 12px;
    --bsrd-radius-lg: 20px;
    --bsrd-shadow-lift: 0 18px 40px -18px rgb(0 0 0 / 0.7);
    --bsrd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --bsrd-duration: 200ms;

    --bsrd-tap-target: 2.75rem; /* 44 px */
}

/* Mientras el landing está en pantalla, el fondo del documento es el suyo: así no asoma una franja blanca al desplazar más allá
   del final ni entre la pantalla de carga y la página. */
html:has(.landing),
body:has(.landing),
html:has(.legal),
body:has(.legal) {
    background-color: var(--bsrd-ink);
}

.bsrd-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --bsrd-duration: 0.01ms;
    }
}