/* ===============================
GLOBAL THEME VARIABLES
================================ */
 
:root{

    --bg-primary:#F8FAFC;
    --bg-secondary:#f5f7fb;

    --text-primary:#111;
    --text-secondary:#444;

    --border-color:#e0e0e0;

    --link-color:rgb(0, 140, 230);

    --button-bg:#111;
    --button-text:#fff;

    --shadow-soft: 0 2px 6px rgba(0,0,0,0.08);
    --shadow-medium: 0 6px 16px rgba(0,0,0,0.12);
    --shadow-strong: 0 12px 30px rgba(0,0,0,0.16);

}

/* DARK MODE */

[data-theme="dark"]{

    --bg-primary:#121212;
    --bg-secondary:#1e1e1e;

    --text-primary:#f2f2f2;
    --text-secondary:#bbbbbb;

    --border-color:#333;

    --link-color:rgb(0, 140, 230);

    --button-bg:#ffffff;
    --button-text:#111;

    --shadow-soft: 0 2px 6px rgba(0,0,0,0.5);
    --shadow-medium: 0 6px 16px rgba(0,0,0,0.6);
    --shadow-strong: 0 12px 30px rgba(0,0,0,0.7);

}

/* ===============================
GLOBAL ELEMENT STYLING
================================ */

body{

    background:var(--bg-primary);
    color:var(--text-primary);
    transition:background .35s,color .35s;

}

/* Layout */

header,nav,section,footer{
    background:var(--bg-primary);
    /*padding:20px;*/
}

/* Text */

p,span,li,div,label,ul,ol{

    color:var(--text-secondary);

}

/* Links */

a{

    color:var(--link-color);

}

/* Inputs */

input,textarea,select{

    background:var(--bg-secondary);

    border:1px solid var(--border-color);

    color:var(--text-primary);

    padding:8px;

}

/* Tables */

th,td{

    border:1px solid var(--border-color); 
  
}

/* Buttons */

button{

background:var(--button-bg);

color:var(--button-text);

}

/* Dark images */

[data-theme="dark"] img{

    opacity:.9;

}

/* ===============================
THEME SWITCH
================================ */

.theme-switcher{

    display:flex;

    align-items:center;

    gap:10px;

}

/* Icons */

.theme-icon{

    font-size:18px;

}

/* Toggle */

.switch{

    position:relative;

    display:inline-block;

    width:50px;

    height:26px;

}

.switch input{

    opacity:0;

    width:0;

    height:0;

}

.theme-switcher .slider{

    position:absolute;

    cursor:pointer;

    inset:0;

    background:#ccc;

    transition:.4s;

    border-radius:34px;

}

.theme-switcher .slider:before{

    position:absolute;

    content:"";

    height:20px;

    width:20px;

    left:3px;

    bottom:3px;

    background:white;

    transition:.4s;

    border-radius:50%;

}

input:checked + .slider{

    background:#4da3ff;

}

input:checked + .slider:before{

    transform:translateX(24px);

}