/* ==========================================================
   SOVEREIGNAQUA DESIGN SYSTEM
   Variables
========================================================== */

:root{

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

    --primary:#00CFFF;

    --primary-dark:#009BC2;

    --secondary:#1B365D;

    --accent:#4FD1C5;

    /* ======================================================
       BACKGROUNDS
    ====================================================== */

    --background:#081424;

    --background-light:#10233D;

    --surface:#132944;

    --card:#17324F;

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

    --text-primary:#FFFFFF;

    --text-secondary:#C8D6E5;

    --text-muted:#91A7C0;

    /* ======================================================
       BORDERS
    ====================================================== */

    --border:rgba(255,255,255,.08);

    /* ======================================================
       SHADOWS
    ====================================================== */

    --shadow-sm:0 2px 8px rgba(0,0,0,.15);

    --shadow-md:0 8px 24px rgba(0,0,0,.25);

    --shadow-lg:0 15px 40px rgba(0,0,0,.35);

    /* ======================================================
       TYPOGRAPHY
    ====================================================== */

    --font-primary:'Poppins',sans-serif;

    --font-heading:'Poppins',sans-serif;

    /* ======================================================
       SPACING
    ====================================================== */

    --radius-sm:8px;

    --radius-md:12px;

    --radius-lg:18px;

    --radius-xl:24px;

    /* ======================================================
       TRANSITIONS
    ====================================================== */

    --transition:.3s ease;

    /* ======================================================
       MAX WIDTH
    ====================================================== */

    --container-width:1200px;

}