/**
 * ==========================================
 * TelecomRoute Design System
 * Global Variables
 * ==========================================
 */

:root{

    /* ======================================
       Brand Colors
    ====================================== */

    --tr-primary:#0A2E73;
    --tr-primary-light:#2563EB;
    --tr-primary-dark:#081F4D;

    --tr-success:#16A34A;
    --tr-warning:#F59E0B;
    --tr-danger:#DC2626;

    /* ======================================
       Neutral Colors
    ====================================== */

    --tr-white:#FFFFFF;

    --tr-bg:#F8FAFC;

    --tr-bg-light:#EEF4FF;

    --tr-border:#E2E8F0;

    --tr-text:#0F172A;

    --tr-muted:#64748B;

    /* ======================================
       Border Radius
    ====================================== */

    --tr-radius-xs:8px;

    --tr-radius-sm:12px;

    --tr-radius-md:18px;

    --tr-radius-lg:24px;

    /* ======================================
       Shadows
    ====================================== */

    --tr-shadow-sm:
        0 4px 12px rgba(15,23,42,.05);

    --tr-shadow:

        0 10px 30px rgba(15,23,42,.08);

    --tr-shadow-lg:

        0 20px 50px rgba(15,23,42,.15);

    /* ======================================
       Transition
    ====================================== */

    --tr-transition:.35s ease;

    /* ======================================
       Container
    ====================================== */

    --tr-container:1320px;

}

/* ==========================================
   Compatibility Classes
========================================== */

.tr-section-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(255,255,255,.12);
    color:#ffffff;
    font-size:14px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:20px;
}

/* ==========================================
   Global Container
========================================== */

.tr-container{
    width:100%;
    max-width:var(--tr-container);
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
}