/*==========================================================
    VMENTORZ DESIGN SYSTEM
    VARIABLES.CSS
==========================================================*/

/*==========================
Light Theme (Default)
==========================*/

:root{

    /* Brand Colors */

    --primary:#00B592;
    --primary-dark:#00997A;
    --primary-light:#38D9B5;

    --secondary:#42D982;
    --secondary-dark:#25C766;

    --accent:#B0F9D9;

    --danger:#E7000B;
    --success:#42D982;
    --warning:#F4B740;

    /* Background */

    --bg:#FCFCFC;
    --surface:#FFFFFF;
    --surface-2:#F7FAF9;
    --surface-3:#EEF8F5;

    /* Typography */

    --text:#0E172D;
    --text-muted:#6A7282;
    --text-light:#94A3B8;

    /* Borders */

    --border:#E7ECEF;
    --border-light:#F1F5F9;

    /* Gradients */

    --gradient-primary:
        linear-gradient(
        135deg,
        #00B592,
        #42D982);

    --gradient-soft:
        linear-gradient(
        135deg,
        #B0F9D9,
        #FFFFFF);

    --gradient-hero:
        radial-gradient(
        circle at top left,
        rgba(0,181,146,.18),
        transparent 45%),

        radial-gradient(
        circle at bottom right,
        rgba(66,217,130,.18),
        transparent 40%),

        #FCFCFC;

    /* Shadows */

    --shadow-xs:
        0 2px 6px rgba(15,23,42,.05);

    --shadow-sm:
        0 6px 20px rgba(15,23,42,.08);

    --shadow-md:
        0 15px 35px rgba(15,23,42,.10);

    --shadow-lg:
        0 25px 60px rgba(15,23,42,.12);

    --shadow-primary:
        0 20px 50px rgba(0,181,146,.22);

    /* Radius */

    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;
    --radius-xl:32px;
    --radius-round:999px;

    /* Transition */

    --transition:.35s ease;

}


/*==========================
Dark Theme
==========================*/

[data-theme="dark"]{

    /* Brand */

    --primary:#00CCA8;
    --primary-dark:#00B592;
    --primary-light:#48E6C3;

    --secondary:#03AB62;
    --secondary-dark:#029254;

    --accent:#001C15;

    --danger:#861118;
    --success:#03AB62;
    --warning:#F6B94A;

    /* Background */

    --bg:#030712;
    --surface:#060D1A;
    --surface-2:#0B1324;
    --surface-3:#101A2C;

    /* Typography */

    --text:#F1FDF5;
    --text-muted:#768193;
    --text-light:#9CA8B8;

    /* Borders */

    --border:#162031;
    --border-light:#1C2A3E;

    /* Gradients */

    --gradient-primary:
        linear-gradient(
        135deg,
        #00CCA8,
        #03AB62);

    --gradient-soft:
        linear-gradient(
        135deg,
        rgba(0,204,168,.12),
        rgba(3,7,18,.95));

    --gradient-hero:
        radial-gradient(
        circle at top left,
        rgba(0,204,168,.12),
        transparent 45%),

        radial-gradient(
        circle at bottom right,
        rgba(3,171,98,.10),
        transparent 40%),

        #030712;

    /* Shadows */

    --shadow-xs:
        0 2px 8px rgba(0,0,0,.45);

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

    --shadow-md:
        0 20px 45px rgba(0,0,0,.55);

    --shadow-lg:
        0 35px 70px rgba(0,0,0,.65);

    --shadow-primary:
        0 20px 60px rgba(0,204,168,.18);

}