/*
 * =========================================================
 * CELLENO UI - CORE
 * Versione: 1.0.0
 * File: cui_base.css
 * =========================================================
 */

:root {
    --cui-primary: #0751a7;
    --cui-primary-light: #168cff;
    --cui-primary-dark: #052f63;

    --cui-bg: #eef5fd;
    --cui-surface: #ffffff;
    --cui-surface-soft: #f8fbff;

    --cui-text: #17375e;
    --cui-text-strong: #083b7d;
    --cui-muted: #72839c;

    --cui-border: #cad8e9;
    --cui-border-soft: #e5ecf5;

    --cui-danger: #d84444;
    --cui-success: #1d8b5f;
    --cui-warning: #d99a22;

    --cui-radius-xs: 6px;
    --cui-radius-sm: 8px;
    --cui-radius-md: 12px;
    --cui-radius-lg: 18px;
    --cui-radius-xl: 24px;

    --cui-space-xs: 4px;
    --cui-space-sm: 8px;
    --cui-space-md: 16px;
    --cui-space-lg: 24px;
    --cui-space-xl: 32px;

    --cui-font: "Segoe UI", Arial, Helvetica, sans-serif;

    --cui-shadow-sm: 0 6px 18px rgba(24,72,128,.07);
    --cui-shadow-md: 0 14px 36px rgba(24,72,128,.10);
    --cui-shadow-lg: 0 26px 70px rgba(24,72,128,.16);

    --cui-transition-fast: .15s ease;
    --cui-transition: .20s ease;
}


/* =========================================================
   BASE
   ========================================================= */

html,
body {
    font-family: var(--cui-font);
}


/* =========================================================
   CARD
   ========================================================= */

.cui-card {
    box-sizing: border-box;
    background: var(--cui-surface);
    border: 1px solid rgba(255,255,255,.94);
    border-radius: var(--cui-radius-xl);
    box-shadow: var(--cui-shadow-md);
}


/* =========================================================
   INPUT
   ========================================================= */

.cui-input {
    box-sizing: border-box;
    background: var(--cui-surface);
    border: 1px solid var(--cui-border);
    border-radius: var(--cui-radius-md);
    color: var(--cui-text);
    font-family: var(--cui-font);
    outline: none;
    transition:
        border-color var(--cui-transition),
        box-shadow var(--cui-transition);
}

.cui-input:focus {
    border-color: var(--cui-primary-light);
    box-shadow: 0 0 0 4px rgba(22,140,255,.11);
}


/* =========================================================
   BUTTON
   ========================================================= */

.cui-button {
    box-sizing: border-box;
    border: 0;
    border-radius: var(--cui-radius-md);
    background: linear-gradient(
        135deg,
        var(--cui-primary-light) 0%,
        #0060d8 100%
    );
    color: #ffffff;
    font-family: var(--cui-font);
    font-weight: 700;
    cursor: pointer;
    transition:
        transform var(--cui-transition-fast),
        box-shadow var(--cui-transition-fast);
}

.cui-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,96,216,.24);
}


/* =========================================================
   LINK
   ========================================================= */

.cui-link {
    color: var(--cui-primary-light);
    font-family: var(--cui-font);
    text-decoration: none;
}

.cui-link:hover {
    text-decoration: underline;
}


/* =========================================================
   TESTI
   ========================================================= */

.cui-text {
    color: var(--cui-text);
}

.cui-text-strong {
    color: var(--cui-text-strong);
}

.cui-muted {
    color: var(--cui-muted);
}


/* =========================================================
   UTILITY
   ========================================================= */

.cui-hidden {
    display: none !important;
}

.cui-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cui-flex {
    display: flex;
}

.cui-grid {
    display: grid;
}

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

.cui-text-center {
    text-align: center;
}


/* =========================================================
   RESPONSIVE CORE
   ========================================================= */

@media (max-width: 800px) {
    :root {
        --cui-space-lg: 20px;
        --cui-space-xl: 24px;
    }
}