/* ============================================================
   colors.css
   ------------------------------------------------------------
   SOLO le variabili di palette. È il file caricato per primo:
   isolare qui i colori rende banale il re-skin del sito.

   Palette di brand Tripco:
     #c41218  rosso scuro (accento profondo / hover)
     #fa434b  rosso corallo (main color / brand)
     #ff6d57  corallo
     #faaa5a  ambra calda
     #fff9f5  crema (sfondo chiaro)
   ============================================================ */

:root {
    /* Brand */
    --accent:        #fa434b;   /* main color */
    --accent-dark:   #c41218;   /* accento profondo / hover */
    --accent-soft:   #ffd9d2;   /* tinta chiara del corallo (fondi card) */
    --coral:         #ff6d57;
    --amber:         #faaa5a;
    --amber-dark:    #f0892c;   /* ambra profonda (fine gradiente) */

    /* Sfondi */
    --bg:            #ffffff;
    --bg-alt:        #fff9f5;    /* crema */
    --bg-alt-dark:   #fbe6d8;    /* crema più carica (fine gradiente) */
    --bg-dark:       #1c1517;    /* scuro caldo (footer, sezioni scure) */

    /* Gradienti (colore base → variante scura) */
    --accent-gradient: linear-gradient(130deg, var(--accent), var(--accent-dark));
    --amber-gradient:  linear-gradient(130deg, var(--amber), var(--amber-dark));
    --bg-alt-gradient: linear-gradient(130deg, var(--bg-alt), var(--bg-alt-dark));

    /* Testo */
    --text:          #1a1416;
    --text-muted:    #6b5e5e;
    --text-invert:   #fff9f5;

    /* Linee e bordi */
    --border:        #f0e4de;
    --rule:          #e6d5cd;
    --timeline-idle: rgb(200, 200, 200);     /* linea/punti "spenti" della timeline */

    /* Stati */
    --focus:         #fa434b;

    /* Overlay */
    --overlay:       rgba(28, 21, 23, .55);
}