/* variables.css — Paleta y tokens de diseño TuFamilia */

:root {
    /* Paleta principal — tonos terrosos México */
    --tf-terracota:      #C0714F;
    --tf-terracota-dark: #9A5237;
    --tf-terracota-light:#D4906E;

    --tf-cafe:           #8B5E3C;
    --tf-cafe-dark:      #5C3D2E;
    --tf-cafe-oscuro:    #3E2010;

    --tf-beige:          #F2E8D9;
    --tf-beige-dark:     #E0CEB8;
    --tf-crema:          #FAF3E8;

    --tf-verde-musgo:    #7A8C6E;
    --tf-verde-dark:     #5C6B50;

    --tf-azul-indigo:    #5B7FA6;
    --tf-azul-dark:      #3D5F82;

    /* Semánticos */
    --tf-color-accion:   var(--tf-terracota);
    --tf-color-accion-hover: var(--tf-terracota-dark);
    --tf-color-texto:    var(--tf-cafe-oscuro);
    --tf-color-texto-suave: var(--tf-cafe);
    --tf-color-fondo:    var(--tf-crema);
    --tf-color-tarjeta:  #FFFFFF;
    --tf-color-borde:    var(--tf-beige-dark);
    --tf-color-link:     var(--tf-azul-indigo);
    --tf-color-exito:    #5A8A5A;
    --tf-color-error:    #A04040;

    /* Tipografía */
    --tf-font-titulo:    'Lora', 'Playfair Display', Georgia, serif;
    --tf-font-cuerpo:    'Inter', 'Source Sans Pro', system-ui, sans-serif;

    --tf-size-xs:        0.75rem;   /* 12px */
    --tf-size-sm:        0.875rem;  /* 14px */
    --tf-size-base:      1rem;      /* 16px */
    --tf-size-md:        1.125rem;  /* 18px */
    --tf-size-lg:        1.375rem;  /* 22px */
    --tf-size-xl:        1.75rem;   /* 28px */
    --tf-size-2xl:       2.25rem;   /* 36px */
    --tf-size-3xl:       3rem;      /* 48px */

    --tf-line-height:    1.65;

    /* Espaciado */
    --tf-space-xs:       0.25rem;
    --tf-space-sm:       0.5rem;
    --tf-space-md:       1rem;
    --tf-space-lg:       1.5rem;
    --tf-space-xl:       2.5rem;
    --tf-space-2xl:      4rem;

    /* Bordes y sombras */
    --tf-radius-sm:      4px;
    --tf-radius-md:      8px;
    --tf-radius-lg:      16px;
    --tf-radius-pill:    999px;

    --tf-sombra-sm:      0 1px 3px rgba(62,32,16,0.10);
    --tf-sombra-md:      0 4px 12px rgba(62,32,16,0.12);
    --tf-sombra-lg:      0 8px 28px rgba(62,32,16,0.15);

    /* Transiciones */
    --tf-transition:     0.2s ease;

    /* Layout */
    --tf-max-width:      1140px;
    --tf-header-height:  64px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tf-color-fondo:        #1E1610;
        --tf-color-tarjeta:      #2A1F18;
        --tf-color-texto:        #EDE0CC;
        --tf-color-texto-suave:  #C4A882;
        --tf-color-borde:        #4A3328;
        --tf-color-link:         #7FAFD4;
        --tf-color-exito:        #6AAF6A;
        --tf-color-error:        #D47070;
    }
}