/* ==========================================================
   GLOBAL DESIGN TOKENS
   SCL Platform
========================================================== */

:root{

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

    --primary:#00e5ff;
    --secondary:#7c4dff;
    --accent:#00ffc6;

    --accent-primary:#13D8FF;
    --accent-secondary:#5B7CFF;

    --accent-gradient:linear-gradient(
        90deg,
        var(--accent-primary),
        var(--accent-secondary)
    );

    --accent-gradient-135:linear-gradient(
        135deg,
        var(--accent-primary),
        var(--accent-secondary)
    );



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

    --bg-color:#090b14;

    --card-color:rgba(255,255,255,.08);

    --footer-bg:#05070d;

    --navbar-bg:rgba(9,11,20,.75);

    --glass-background:rgba(255,255,255,.04);

    --stats-background:rgba(12,18,32,.65);



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

    --text:#ffffff;

    --text-soft:#b8c0d9;

    --navbar-text:#ffffff;

    --button-text:#ffffff;



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

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

    --card-border:rgba(19,216,255,.18);

    --card-border-hover:rgba(19,216,255,.45);

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



    /* ==========================================================
       FORM
    ========================================================== */

    --form-error:#ff6b6b;

    --form-error-ring:rgba(255,107,107,.22);



    /* ==========================================================
       MODAL
    ========================================================== */

    --modal-overlay:rgba(24,31,46,.72);



    /* ==========================================================
       EFFECTS
    ========================================================== */

    --shadow:0 0 30px rgba(0,229,255,.15);

    --particle-color:rgba(0,229,255,.70);

    --particle-line:rgba(124,77,255,.28);

    --hero-glow:
    radial-gradient(
        circle,
        rgba(0,170,255,.22) 0%,
        rgba(0,120,255,.10) 45%,
        transparent 75%
    );



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

    --brand-position:0%;

    --brand-speed:10;



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

    --transition-fast:.25s ease;

    --transition-normal:.35s ease;

    --transition-slow:.5s ease;



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

    --navbar-font:"Poppins",sans-serif;

    --navbar-font-size:.95rem;

    --navbar-font-weight:600;

    --navbar-letter-spacing:.3px;

}



body.light{

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

    --bg-color:#f5f7ff;

    --card-color:#eef3fa;

    --footer-bg:#e9edf5;

    --navbar-bg:rgba(245,247,255,.80);

    --glass-background:rgba(255,255,255,.72);




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

    --text:#10131c;

    --text-soft:#444;

    --navbar-text:#10131c;

    --button-text:#10131c;



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

    --border:#d5dbe8;

    --card-border:rgba(19,216,255,.20);

    --card-border-hover:rgba(19,216,255,.45);

    --form-border:rgba(0,0,0,.20);



    /* ==========================================================
       FORM
    ========================================================== */

    --form-error:#dc2626;

    --form-error-ring:rgba(220,38,38,.18);



    /* ==========================================================
       MODAL
    ========================================================== */

    --modal-overlay:rgba(255,255,255,.30);

    --modal-outline:rgba(0,0,0,.06);



    /* ==========================================================
       EFFECTS
    ========================================================== */

    --particle-color:rgba(0,180,255,.55);

    --particle-line:rgba(59,130,246,.10);

    --hero-glow:
    radial-gradient(
        circle,
        rgba(0,170,255,.14) 0%,
        rgba(0,120,255,.05) 45%,
        transparent 75%
    );

}