/*
 * Stili Globali CRI (Variabili, Font, Tema Base)
 */

/* Importazione Font Karla */
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400&display=swap');

/* 1. Definizione delle Variabili (Palette Ufficiale) */
:root {
    --cri-rosso: #CC0000;   /* R204 G0 B0 */
    --cri-verde: #106C59;   /* R16 G108 B89 */
    --cri-bianco: #FFFFFF;
    --cri-nero: #000000;

    /* Mappatura per il tema */
    --footer-dark: var(--cri-nero);
    --copy: #ffffff73;
}

/* Applicazione Font Karla Globale */
body,
.md-tabs,
.md-nav,
.md-header__title,
.md-typeset,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset p {
    font-family: 'Karla', sans-serif;
}

/* 2. Colori Tema (Modo Light) */
[data-md-color-scheme="default"] {
    --md-theme-color-primary: var(--cri-bianco);
    --md-theme-color-accent: var(--cri-rosso);
    --md-default-fg-color--light: var(--cri-nero);
    --md-default-fg-color: var(--cri-nero);
    --md-default-bg-color: var(--cri-bianco);
    --md-header-fg-color: var(--cri-nero);
    --md-default-fg-color--focus: var(--cri-rosso);
    --md-typeset-a-color: var(--cri-rosso);
}

/* 3. Stili Strutturali (Header, Footer, Nav) */
.md-footer {
    background-color: var(--cri-nero);
    color: var(--copy);
}

.md-header {
    background-color: var(--cri-bianco) !important;
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.md-tabs {
    background-color: var(--cri-nero);
}
.md-tabs__link {
    color: var(--cri-white) !important;
}

/* 4. Stili Hover Globali (Rosso) */
.md-tabs__link:hover,
.md-tabs__link:focus,
.md-tabs__link--active {
    color: var(--cri-rosso) !important;
}
a:hover,
.md-typeset a:hover {
    color: var(--cri-rosso);
}
.md-typeset a:focus,
.md-nav__link:focus {
    outline-color: var(--cri-rosso);
}