/* ═══════════════════════════════════════════════════════════════════════════
   AURORA TENEBRIS - DESIGN SYSTEM
   Versione unificata con modale integrata
═══════════════════════════════════════════════════════════════════════════ */

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 0. FONT FACE — self-hosted, struttura /assets/fonts/{nome-font}/       │
   └─────────────────────────────────────────────────────────────────────────┘ 
    /* Crimson Pro */
@font-face {
  font-family: 'Crimson Pro';
  src: url('../fonts/crimson-pro/crimson-pro-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Marcellus */
@font-face {
  font-family: 'Marcellus';
  src: url('../fonts/marcellus/marcellus-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Optimus Princeps */
@font-face {
  font-family: 'Optimus Princeps';
  src: url('../fonts/optimus-princeps/OptimusPrinceps.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Cinzel */
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel/cinzel-latin-500-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Merriweather */
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/merriweather/merriweather-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 1. VARIABILI — PALETTE DI FALLBACK (grigi neutri + bianco panna)       │
   │                                                                         │
   │ Questa è la palette che si vede SOLO se main-skin.css non applica      │
   │ nessun body.skin-{slug} (es. layout main-base, home pubblica). Serve   │
   │ a verificare che struttura (qui) e colore skin (main-skin.css) siano   │
   │ davvero disaccoppiati: se cambi skin e questi grigi non compaiono mai  │
   │ sotto il layout main-skin, la separazione funziona.                    │
   │                                                                         │
   │ I NOMI delle variabili (--at-oro, --at-ottone, ecc.) restano quelli     │
   │ storici anche se qui il valore non è più dorato — sono ormai token di  │
   │ RUOLO ("accento primario", "sfondo profondo"), non descrizioni         │
   │ letterali del colore. Decisione esplicita: non rinominarli (vedi nota  │
   │ di sessione) per non dover toccare var(--at-oro) in tutti gli altri    │
   │ CSS del progetto.                                                       │
   └─────────────────────────────────────────────────────────────────────────┘ */

:root {
    /* ── Sfondi (grigi neutri) ─────────────────────────────────────────── */
    --at-notte:         #1A1A1A;
    --at-ardesia:       #2A2A2A;
    --at-nebbia:        #383838;
    --at-acciaio:       #4A4A4A;

    /* ── Accento (bianco panna/luna, al posto di oro/ottone) ────────────── */
    --at-ottone-scuro:  #3A3A32;
    --at-bronzo:        #6A6A5C;
    --at-ottone:        #A8A290;
    --at-oro:           #F5F0E0;
    --at-oro-chiaro:    #FFFBF2;

    /* ── Testo ───────────────────────────────────────────────────────── */
    --at-testo:         #EDEDED;
    --at-testo-muted:   #A8A8A8;
    --at-testo-faint:   #707070;

    /* ── Stato ───────────────────────────────────────────────────────── */
    --at-successo:      #2E7D52;
    --at-pericolo:      #8B2E2E;
    --at-warning:       #7A5A1A;
    --at-info:          #1A4A7A;

    /* ── Fissi (NON cambiano con tema o skin) ─────────────────────────────
       Servono per il testo su sfondi che restano sempre uguali a se
       stessi indipendentemente dal tema/skin: sfondi metallici (es.
       .btn-oro) o sfondi scuri hardcoded (es. .btn-pericolo, isole
       decorative sempre-scure come .missive-card / .diario__pagina). */
    --at-testo-su-metallo:   #1E1E1E;
    --at-testo-fisso:        #EDEDED;
    --at-testo-muted-fisso:  #A8A8A8;
    --at-testo-faint-fisso:  #707070;

    /* ── Trittica RGB (per rgba() theme-aware) ─────────────────────────── */
    --at-ardesia-rgb:   42, 42, 42;

    /* ── Busta missiva (.missive-card) — invariata, non fa parte della
       palette skin: isola decorativa sempre-scura by design. ──────────── */
    --at-busta-da:            #2A1F14;
    --at-busta-a:             #1A1510;
    --at-busta-non-letta-da:  #3D2E1A;
    --at-busta-non-letta-a:   #2A1F14;
    --at-busta-testo:         #E8E0D0;
    --at-busta-testo-muted:   #8AACBE;
    --at-busta-testo-faint:   #4A7090;

    /* ── Tipografia ──────────────────────────────────────────────────── */
    /*Font di Base / Fallback Globale */
    --at-font:    'Crimson Pro', 'Georgia', serif; /* Font generico per la lettura */
    --at-font-ui: 'Inter', 'Segoe UI', sans-serif; /* Font per l'interfaccia */
    
    --at-font-crimsonpro:     'Crimson Pro', 'Georgia', serif;
    --at-font-marcellus:       'Marcellus', 'Georgia', serif;
    --at-font-cinzel:          'Cinzel', 'Georgia', serif;
    --at-font-optimusprinceps: 'Optimus Princeps', 'Cinzel', 'Georgia', serif;
    --at-font-merriweather:    'Merriweather', 'Georgia', serif;
    --at-font-inter:          'Inter', 'Segoe UI', sans-serif;

    /* ── Layout ──────────────────────────────────────────────────────── */
    --at-radius:        6px;
    --at-radius-lg:     10px;
    --at-shadow:        0 2px 12px rgba(0,0,0,0.5);
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 1b. TEMA CHIARO — override delle variabili --at-* per main-base        │
   │ Applicato su body.tema-chiaro (solo layout main-base, vedi             │
   │ LayoutResolver::temaBase()). Indipendente dal sistema skin (1c sotto): │
   │ un body non ha mai contemporaneamente tema-chiaro e skin-{slug}.      │
   └─────────────────────────────────────────────────────────────────────────┘ */

body.tema-chiaro {
    --at-notte:       #F0EDE6;
    --at-ardesia:     #E2DDD5;
    --at-nebbia:      #D5CFC6;
    --at-acciaio:     #B0A898;
    --at-testo:       #1C1A17;
    --at-testo-muted: #5A5248;
    --at-testo-faint: #9A9088;

    --at-ardesia-rgb: 226, 221, 213;

    --at-busta-da:            #F5E6C8;
    --at-busta-a:             #E8D5A8;
    --at-busta-non-letta-da:  #F0DCAE;
    --at-busta-non-letta-a:   #E5CB98;
    --at-busta-testo:         #2A1F14;
    --at-busta-testo-muted:   #6B4A2A;
    --at-busta-testo-faint:   #8B6A42;
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 2. RESET & BASE                                                        │
   └─────────────────────────────────────────────────────────────────────────┘ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background:  var(--at-notte);
    color:       var(--at-testo);
    font-family: var(--at-font);
    min-height:  100vh;
    line-height: 1.6;
}

a {
    color: var(--at-oro);
    text-decoration: none;
}

a:hover {
    color: var(--at-oro-chiaro);
    text-decoration: underline;
}

img {
    max-width: 100%;
    display: block;
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 3. TIPOGRAFIA                                                          │
   └─────────────────────────────────────────────────────────────────────────┘ */

h1 {
    font-family: var(--at-font);
    font-size: 2rem;
    font-weight: 600;
    color: var(--at-testo);
}

h2 {
    font-family: var(--at-font);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--at-testo);
}

h3 {
    font-family: var(--at-font-ui);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--at-oro);
}

p {
    margin-bottom: 0.75rem;
}


/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 4. FORM                                                                │
   └─────────────────────────────────────────────────────────────────────────┘ */

.at-form-group {
    margin-bottom: 1.25rem;
}

.at-label {
    display: block;
    font-family: var(--at-font-ui);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--at-testo-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
}

.at-input {
    width: 100%;
    background: var(--at-notte);
    border: 1px solid var(--at-acciaio);
    border-radius: var(--at-radius);
    color: var(--at-testo);
    font-family: var(--at-font-ui);
    font-size: 0.95rem;
    padding: 0.55rem 0.85rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
}

.at-input:focus {
    outline: none;
    border-color: var(--at-ottone);
    box-shadow: 0 0 0 2px rgba(181,136,42,0.18);
}

.at-input::placeholder {
    color: var(--at-testo-faint);
}

.at-hint {
    display: block;
    font-family: var(--at-font-ui);
    font-size: 0.75rem;
    color: var(--at-testo-faint);
    margin-top: 0.3rem;
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 6. BOTTONI                                                             │
   └─────────────────────────────────────────────────────────────────────────┘ */

.btn {
    display: inline-block;
    font-family: var(--at-font-ui);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.55rem 1.25rem;
    border-radius: var(--at-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
}

.btn--full {
    width: 100%;
}

.btn-oro {
    background: var(--at-ottone);
    color: var(--at-testo-su-metallo);
    border-color: var(--at-oro);
}

.btn-oro:hover {
    background: var(--at-oro);
    border-color: var(--at-oro-chiaro);
    color: var(--at-testo-su-metallo);
    text-decoration: none;
}

.btn-ghost {
    background: transparent;
    color: var(--at-testo-muted);
    border-color: var(--at-acciaio);
}

.btn-ghost:hover {
    background: var(--at-nebbia);
    color: var(--at-testo);
    text-decoration: none;
}

.btn-pericolo {
    background: var(--at-pericolo);
    color: var(--at-testo-fisso);
    border-color: #A03A3A;
}

.btn-pericolo:hover {
    background: #A03A3A;
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 7. FLASH MESSAGES                                                      │
   └─────────────────────────────────────────────────────────────────────────┘ */

.flash {
    font-family: var(--at-font-ui);
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: var(--at-radius);
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.flash--successo {
    background: rgba(46,125,82,0.15);
    border-color: var(--at-successo);
    color: #70C090;
}

.flash--errore {
    background: rgba(139,46,46,0.15);
    border-color: var(--at-pericolo);
    color: #E07070;
}

.flash--info {
    background: rgba(26,74,122,0.15);
    border-color: var(--at-info);
    color: #70B0E0;
}

.flash--warning {
    background: rgba(122,90,26,0.15);
    border-color: var(--at-warning);
    color: #D0A040;
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 8. CARD — struttura piatta di base                                    │
   └─────────────────────────────────────────────────────────────────────────┘ */

.at-card,
.modal__box {
    position: relative;
    background-color: var(--at-ardesia);
    border: 1px solid var(--at-acciaio);
    border-radius: var(--at-radius-lg);
    padding: 1.25rem;
}

.at-card > *,
.modal__box > * {
    position: relative;
    z-index: 1;
}

.at-card {
    box-shadow: var(--at-shadow);
}

.at-card--oro {
    box-shadow: 0 0 0 1px var(--at-ottone), var(--at-shadow);
}

/* Cornice grafica 9-slice — SOLO sotto main-skin.php (unico layout che
   inietta le custom property --at-cornice-* sul body). Su main-base.php
   la regola non matcha mai: .at-card/.modal__box restano piatte, bordo
   1px, nessuna immagine. */
body.layout-main .at-card,
body.layout-main .modal__box {
    border: none;
    padding: 11px;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat,
        repeat-x, repeat-x, repeat-y, repeat-y;
    background-position:
        top left, top right, bottom left, bottom right,
        left top, left bottom, left top, right top;
    background-image:
        var(--at-cornice-tl, url('/assets/img/skins/default/cornice-tl.png')),
        var(--at-cornice-tr, url('/assets/img/skins/default/cornice-tr.png')),
        var(--at-cornice-bl, url('/assets/img/skins/default/cornice-bl.png')),
        var(--at-cornice-br, url('/assets/img/skins/default/cornice-br.png')),
        var(--at-cornice-edge-top,    url('/assets/img/skins/default/cornice-edge-top.png')),
        var(--at-cornice-edge-bottom, url('/assets/img/skins/default/cornice-edge-bottom.png')),
        var(--at-cornice-edge-left,   url('/assets/img/skins/default/cornice-edge-left.png')),
        var(--at-cornice-edge-right,  url('/assets/img/skins/default/cornice-edge-right.png'));
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 9. BADGE                                                               │
   └─────────────────────────────────────────────────────────────────────────┘ */

.badge {
    font-family: var(--at-font-ui);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge--oro {
    background: var(--at-ottone-scuro);
    color: var(--at-oro);
}

.badge--info {
    background: var(--at-info);
    color: #70B0E0;
}

.badge--pericolo {
    background: var(--at-pericolo);
    color: #E07070;
}

.badge--successo {
    background: var(--at-successo);
    color: #70C090;
}

.badge--muted {
    background: rgba(61,100,120,0.3);
    color: var(--at-testo-muted);
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 10. BARRE HP / EN                                                      │
   └─────────────────────────────────────────────────────────────────────────┘ */

.at-barra {
    background: var(--at-notte);
    border: 1px solid var(--at-acciaio);
    border-radius: 99px;
    height: 10px;
    overflow: hidden;
}

.at-barra__fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}

.at-barra--hp .at-barra__fill {
    background: #6B2020;
}

.at-barra--hp.alta .at-barra__fill {
    background: var(--at-successo);
}

.at-barra--en .at-barra__fill {
    background: var(--at-ottone);
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 11. MODAL (unificata) — struttura                                     │
   └─────────────────────────────────────────────────────────────────────────┘ */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
}

.modal.aperto {
    display: flex;
}

.modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1001;
}

.modal__box {
    z-index: 1002;
    box-shadow: var(--at-shadow);
    width: 90vw;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.modal__box--media {
    max-width: 680px;
}

.modal__box--avatar {
    max-width: 560px;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--at-acciaio);
    flex-shrink: 0;
}

.modal__header h3 {
    font-family: var(--at-font-ui);
    font-size: 1rem;
    font-weight: 500;
    color: var(--at-oro);
    margin: 0;
}

.modal__chiudi {
    background: transparent;
    border: none;
    color: var(--at-testo-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.15s;
}

.modal__chiudi:hover {
    color: var(--at-testo);
}

.modal__corpo {
    padding: 1.25rem;
    flex: 1;
}

.modal__footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--at-acciaio);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │ 12. MOBILE RESPONSIVE                                                  │
   └─────────────────────────────────────────────────────────────────────────┘ */

@media (max-width: 768px) {
    .auth-box {
        padding: 1.5rem 1.25rem;
    }

    .modal__box {
        width: 95vw;
        max-height: 85vh;
    }

    .modal__header {
        padding: 0.75rem 1rem;
    }

    .modal__corpo {
        padding: 1rem;
    }

    .modal__footer {
        padding: 0.75rem 1rem;
    }
}