/* ==========================================
   FMC BOILER MOBILE V11
   THEME SYSTEM
========================================== */

:root{

    /* ======================================
       BRAND
    ====================================== */

    --primary:#0B8F43;
    --primary-light:#18B85B;
    --primary-dark:#087438;

    --secondary:#2563EB;
    --secondary-light:#60A5FA;

    /* ======================================
       BACKGROUND
    ====================================== */

    --bg:#F4F7F6;

    --card:#FFFFFF;

    --surface:#F8FAF9;

    /* ======================================
       TEXT
    ====================================== */

    --text:#1F2937;

    --text-soft:#6B7280;

    --text-light:#9CA3AF;

    /* ======================================
       STATUS
    ====================================== */

    --success:#22C55E;

    --warning:#F59E0B;

    --danger:#EF4444;

    --info:#0EA5E9;

    /* ======================================
       BORDER
    ====================================== */

    --border:#E5E7EB;

    --divider:#EEF2F7;

    /* ======================================
       RADIUS
    ====================================== */

    --radius-xs:8px;

    --radius-sm:12px;

    --radius:20px;

    --radius-lg:24px;

    --radius-xl:30px;

    /* ======================================
       SHADOW
    ====================================== */

    --shadow-xs:
    0 2px 6px rgba(0,0,0,.04);

    --shadow-sm:
    0 6px 18px rgba(0,0,0,.06);

    --shadow:
    0 10px 25px rgba(0,0,0,.08);

    --shadow-lg:
    0 20px 40px rgba(0,0,0,.12);

    /* ======================================
       TRANSITION
    ====================================== */

    --speed:.25s;

    --speed-slow:.4s;

}

/* ==========================================
   GLOBAL SELECTION
========================================== */

::selection{

    background:rgba(11,143,67,.18);

    color:var(--text);

}

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

a{

    color:var(--primary);

    text-decoration:none;

}

a:hover{

    color:var(--primary-dark);

}

/* ==========================================
   HR
========================================== */

hr{

    border:none;

    height:1px;

    background:var(--divider);

    margin:16px 0;

}

/* ==========================================
   BADGE
========================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.badge-success{

    background:rgba(34,197,94,.12);

    color:var(--success);

}

.badge-warning{

    background:rgba(245,158,11,.12);

    color:var(--warning);

}

.badge-danger{

    background:rgba(239,68,68,.12);

    color:var(--danger);

}

/* ==========================================
   MATERIAL SYMBOL
========================================== */

.material-symbols-rounded{

    vertical-align:middle;

    line-height:1;

    font-variation-settings:
    'FILL' 1,
    'wght' 500,
    'GRAD' 0,
    'opsz' 24;

}

/* ==========================================
   SMOOTH TRANSITION
========================================== */

*{

    transition:
    background-color var(--speed),
    color var(--speed),
    border-color var(--speed),
    box-shadow var(--speed);

}