/*====================================================
GLOBAL THEME VARIABLES
EMI / EMC Engineering Toolkit
====================================================*/

:root{

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

    --bg:#0b1120;

    --surface:#111827;

    --surface-2:#1f2937;

    --card:#111827;

    --primary:#00d4ff;

    --primary-hover:#00aaff;

    --success:#10b981;

    --danger:#ef4444;

    --text:#ffffff;

    --text-secondary:#cbd5e1;

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

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

    --hero:linear-gradient(
        135deg,
        #111827,
        #172554,
        #1e3a8a
    );

    --transition:.35s ease;

}

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

body.light-theme{

    --bg:#f4f7fb;

    --surface:#ffffff;

    --surface-2:#eef3f9;

    --card:#ffffff;

    --primary:#0066ff;

    --primary-hover:#0050d4;

    --success:#16a34a;

    --danger:#dc2626;

    --text:#111827;

    --text-secondary:#475569;

    --border:#d7dce5;

    --shadow:0 10px 30px rgba(0,0,0,.10);

    --hero:linear-gradient(
        135deg,
        #dbeafe,
        #f8fbff,
        #ffffff
    );

}

/*====================================================
GLOBAL BACKGROUND
====================================================*/

body{

    background:var(--bg);

    color:var(--text);

    transition:

        background var(--transition),

        color var(--transition);

}

/*====================================================
GLOBAL CARDS
====================================================*/

.converter-card,
.results-card,
.formula-card,
.note-card{

    background:var(--surface);

    color:var(--text);

    border-color:var(--border);

    box-shadow:var(--shadow);

    transition:all var(--transition);

}

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

h1,
h2,
h3,
h4{

    color:var(--text);

}

p,
li,
td,
label{

    color:var(--text-secondary);

}


/*====================================================
THEME TOGGLE BUTTON
====================================================*/

#themeToggle{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:22px;

    background:var(--surface-2);

    color:var(--primary);

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

    transition:all var(--transition);

    box-shadow:0 8px 20px rgba(0,0,0,.18);

}

#themeToggle:hover{

    transform:translateY(-3px) rotate(15deg);

    background:var(--primary);

    color:#ffffff;

    box-shadow:0 12px 30px rgba(0,212,255,.35);

}

/*====================================================
HEADER
====================================================*/

.top-header{

    background:var(--surface);

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

    transition:all var(--transition);

}

.logo{

    color:var(--primary);

}

.top-header nav a{

    color:var(--text-secondary);

    transition:all var(--transition);

}

.top-header nav a:hover{

    color:var(--primary);

}

/*====================================================
HERO
====================================================*/

.hero{

    background:var(--hero);

    transition:background var(--transition);

}

.hero h1{

    color:var(--text);

}

.hero p{

    color:var(--text-secondary);

}

.hero-badge{

    background:rgba(0,212,255,.12);

    color:var(--primary);

    border:1px solid rgba(0,212,255,.25);

}

/*====================================================
INPUTS
====================================================*/

input,
select,
textarea{

    background:var(--surface-2);

    color:var(--text);

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

    transition:all var(--transition);

}

input:focus,
select:focus,
textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(0,212,255,.15);

}

/*====================================================
TABLES
====================================================*/

table{

    width:100%;

}

table td{

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

}

table tr:hover{

    background:rgba(0,212,255,.08);

}

/*====================================================
BUTTONS
====================================================*/

button{

    transition:all var(--transition);

}

#convertBtn{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-hover)
    );

}

#copyBtn{

    background:var(--success);

}

#resetBtn{

    background:var(--danger);

}

/*====================================================
SMOOTH THEME CHANGE
====================================================*/

*{

    transition:

        background-color .35s ease,

        color .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}