/*
 Theme Name:   Ojomojo Child
 Theme URI:    https://ojomojo.com
 Description:  Child theme di GeneratePress per Ojomojo
 Author:       Ojomojo
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  ojomojo-child
*/

/* =============================================
   IMPORT FONT — DM Sans + DM Mono (Google Fonts)
   DM Sans: interfaccia generale
   DM Mono: codici oggetto, ID, posizioni
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;1,9..40,400&family=DM+Mono:wght@400&display=swap');

/* =============================================
   VARIABILI GLOBALI — DESIGN SYSTEM OJOMOJO
   Modifica questi valori per aggiornare l'intera UI.
   ============================================= */
:root {

    /* --- PALETTE COLORI --- */
    --ojo-ink:           #1A1A2E;   /* Testo principale, header, footer */
    --ojo-cream:         #F5F0E8;   /* Sfondo principale app */
    --ojo-sand:          #E8E4DC;   /* Sfondo secondario, card hover */
    --ojo-terracotta:    #D4845A;   /* Accento primario: CTA, bottoni principali */
    --ojo-terracotta-dk: #B8633A;   /* Terracotta hover/pressed */
    --ojo-slate:         #3D4FA0;   /* Accento secondario: info, link, navigazione */
    --ojo-slate-lt:      #EEF0F7;   /* Sfondo badge slate */
    --ojo-sage:          #2D7A4F;   /* Stato: disponibile */
    --ojo-sage-lt:       #E6F4EC;   /* Sfondo badge sage */
    --ojo-amber:         #B05C1A;   /* Stato: in prestito */
    --ojo-amber-lt:      #FDF0E6;   /* Sfondo badge amber */
    --ojo-red:           #B91C1C;   /* Errori, scadenze */
    --ojo-red-lt:        #FEF2F2;   /* Sfondo badge errore */
    --ojo-white:         #FFFFFF;
    --ojo-border:        rgba(26, 26, 46, 0.12);
    --ojo-border-strong: rgba(26, 26, 46, 0.25);

    /* --- TIPOGRAFIA --- */
    --ojo-font-main:     'DM Sans', system-ui, sans-serif;
    --ojo-font-mono:     'DM Mono', 'Courier New', monospace;

    /* --- SCALA TIPOGRAFICA --- */
    --ojo-text-xs:       11px;
    --ojo-text-sm:       13px;
    --ojo-text-base:     14px;
    --ojo-text-md:       16px;
    --ojo-text-lg:       18px;
    --ojo-text-xl:       22px;
    --ojo-text-display:  28px;

    /* --- SPAZIATURE --- */
    --ojo-space-xs:      4px;
    --ojo-space-sm:      8px;
    --ojo-space-md:      16px;
    --ojo-space-lg:      24px;
    --ojo-space-xl:      40px;

    /* --- BORDI E RAGGI --- */
    --ojo-radius-sm:     4px;
    --ojo-radius-md:     8px;
    --ojo-radius-lg:     12px;
    --ojo-radius-pill:   20px;

    /* --- OMBRE (usate con parsimonia) --- */
    --ojo-shadow-sm:     0 1px 3px rgba(26, 26, 46, 0.08);
    --ojo-shadow-md:     0 4px 12px rgba(26, 26, 46, 0.10);

    /* --- TRANSIZIONI --- */
    --ojo-transition:    150ms ease;
}

/* =============================================
   RESET BASE
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--ojo-font-main);
    color: var(--ojo-ink);
    background-color: var(--ojo-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================
   TEMPLATE BLANK — pagine che montano la React SPA
   Azzera tutto ciò che GeneratePress aggiunge.
   ============================================= */
body.template-ojomojo-app {
    margin: 0;
    padding: 0;
    background: var(--ojo-cream);
}

body.template-ojomojo-app .site-header,
body.template-ojomojo-app .site-footer,
body.template-ojomojo-app .navigation-bar {
    display: none;
}

body.template-ojomojo-app .site-main {
    padding: 0;
    margin: 0;
}

/* =============================================
   UTILITY CLASSES
   Per le pagine statiche (landing, pricing, ecc.)
   ============================================= */

.ojo-text-primary   { color: var(--ojo-ink); }
.ojo-text-muted     { color: rgba(26, 26, 46, 0.55); }
.ojo-text-accent    { color: var(--ojo-terracotta); }
.ojo-text-mono      { font-family: var(--ojo-font-mono); }

/* Badge di stato */
.ojo-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ojo-space-xs);
    padding: 3px 10px;
    border-radius: var(--ojo-radius-pill);
    font-size: var(--ojo-text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.ojo-badge--available { background: var(--ojo-sage-lt);   color: var(--ojo-sage); }
.ojo-badge--lent      { background: var(--ojo-amber-lt);  color: var(--ojo-amber); }
.ojo-badge--stored    { background: var(--ojo-slate-lt);  color: var(--ojo-slate); }
.ojo-badge--error     { background: var(--ojo-red-lt);    color: var(--ojo-red); }

/* Bottoni base */
.ojo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ojo-space-sm);
    padding: 10px 20px;
    border-radius: var(--ojo-radius-md);
    font-family: var(--ojo-font-main);
    font-size: var(--ojo-text-base);
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background var(--ojo-transition), transform var(--ojo-transition);
    text-decoration: none;
}
.ojo-btn:active { transform: scale(0.98); }

.ojo-btn--primary {
    background: var(--ojo-ink);
    color: var(--ojo-cream);
}
.ojo-btn--primary:hover { background: #2D2D4A; }

.ojo-btn--accent {
    background: var(--ojo-terracotta);
    color: var(--ojo-white);
}
.ojo-btn--accent:hover { background: var(--ojo-terracotta-dk); }

.ojo-btn--outline {
    background: transparent;
    color: var(--ojo-ink);
    border: 1.5px solid var(--ojo-ink);
}
.ojo-btn--outline:hover { background: var(--ojo-sand); }