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

:root{

    --bg:#f5f8fc;

    --card:#ffffff;

    --text:#0f172a;

    --muted:#64748b;

    --primary:#2563eb;

    --border:#e2e8f0;

    --shadow:
        0 10px 30px rgba(15,23,42,.08);

}

/* ==========================================
   BODY
   ========================================== */

body{

    background:var(--bg);

    color:var(--text);

}

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

.top{

    background:transparent;

}

.brand{

    color:var(--text);

}

.dot{

    background:var(--primary);

}

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

.hero h1{

    color:var(--text);

}

.hero p{

    color:var(--muted);

}

/* ==========================================
   GAUGE
   ========================================== */

.g-bg{

    stroke:#e2e8f0;

}

.g-progress{

    stroke:var(--primary);

}

#needle line{

    stroke:var(--primary);

}

#needle circle{

    fill:var(--primary);

}

#speed{

    color:var(--text);

}

.unit{

    color:var(--muted);

}

#status{

    color:var(--muted);

}

/* ==========================================
   BUTTON
   ========================================== */

.primary{

    background:var(--primary);

    color:#ffffff;

}

.primary:hover{

    filter:brightness(.95);

}

.primary:active{

    filter:brightness(.90);

}

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

.card{

    background:var(--card);

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

    box-shadow:var(--shadow);

}

.label{

    color:var(--muted);

}

.value{

    color:var(--text);

}

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

.theme-label{

    background:var(--card);

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

    box-shadow:var(--shadow);

}

.theme-label::after{

    background:var(--primary);

}

.theme-icon{

    color:var(--text);

}

/* ==========================================
   FOOTER
   ========================================== */

.footer{

    color:var(--muted);

}

/* ==========================================
   LINKS
   ========================================== */

a{

    color:var(--primary);

}

a:hover{

    color:#1d4ed8;

}

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

::selection{

    background:rgba(37,99,235,.15);

    color:var(--text);

}