/* =========================================================
   Physics Presentation Engine
   Global Design Variables

   All UI components use these variables.
   Changing this file changes the entire application theme.
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {


    /* -------------------------
       Application Colors
    ------------------------- */

    --background-color:
        #101418;

    --surface-color:
        #182028;

    --surface-light:
        #222d38;


    --primary-color:
        #4da3ff;

    --secondary-color:
        #7c5cff;


    --accent-color:
        #00d4ff;


    --success-color:
        #38d996;


    --warning-color:
        #ffc857;


    --danger-color:
        #ff5c5c;




    /* -------------------------
       Text Colors
    ------------------------- */


    --text-primary:
        #ffffff;


    --text-secondary:
        #c8d1dc;


    --text-muted:
        #8794a5;




    /* -------------------------
       Borders
    ------------------------- */


    --border-color:
        rgba(255,255,255,0.12);


    --border-radius-small:
        6px;


    --border-radius:
        12px;


    --border-radius-large:
        18px;





    /* -------------------------
       Panels
    ------------------------- */


    --left-panel-width:
        260px;


    --right-panel-width:
        320px;


    --topbar-height:
        64px;


    --control-height:
        70px;




    /* -------------------------
       Spacing
    ------------------------- */


    --space-1:
        4px;


    --space-2:
        8px;


    --space-3:
        12px;


    --space-4:
        16px;


    --space-5:
        24px;


    --space-6:
        32px;


    --space-7:
        48px;




    /* -------------------------
       Typography
    ------------------------- */


    --font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;


    --font-size-small:
        0.85rem;


    --font-size-normal:
        1rem;


    --font-size-large:
        1.25rem;


    --font-size-title:
        2rem;


    --font-size-slide-title:
        3rem;





    /* -------------------------
       Shadows
    ------------------------- */


    --shadow-small:
        0 2px 6px rgba(0,0,0,.25);


    --shadow:
        0 5px 20px rgba(0,0,0,.35);


    --shadow-large:
        0 10px 40px rgba(0,0,0,.45);





    /* -------------------------
       Animation
    ------------------------- */


    --transition-fast:
        0.15s ease;


    --transition:
        0.3s ease;


    --transition-slow:
        0.6s ease;





    /* -------------------------
       Presentation Area
    ------------------------- */


    --slide-background:
        #ffffff;


    --slide-text:
        #111111;


    --slide-padding:
        40px;


    --thumbnail-height:
        130px;



    /* -------------------------
       Media
    ------------------------- */


    --video-radius:
        12px;


    --image-radius:
        10px;



    /* -------------------------
       Z indexes
    ------------------------- */


    --z-base:
        1;


    --z-panel:
        10;


    --z-controls:
        20;


    --z-modal:
        100;



}





/* =========================================================
   LIGHT THEME
========================================================= */


[data-theme="light"] {


    --background-color:
        #f3f5f8;


    --surface-color:
        #ffffff;


    --surface-light:
        #eef2f7;


    --text-primary:
        #101418;


    --text-secondary:
        #384452;


    --text-muted:
        #687586;


    --border-color:
        rgba(0,0,0,0.12);


    --slide-background:
        #ffffff;


    --slide-text:
        #111111;

}





/* =========================================================
   DARK THEME
========================================================= */


[data-theme="dark"] {


    --background-color:
        #101418;


    --surface-color:
        #182028;


    --surface-light:
        #222d38;


    --text-primary:
        #ffffff;


    --text-secondary:
        #c8d1dc;


    --text-muted:
        #8794a5;


    --border-color:
        rgba(255,255,255,0.12);


    --slide-background:
        #ffffff;


    --slide-text:
        #111111;


}