:root {
    /* =========================
       DARK MODE - DEFAULT
       ========================= */

    --bg: #080B12;
    --surface: #0F172A;
    --surface-hover: #111C31;

    --text: #F8FAFC;
    --text-muted: #94A3B8;

    --primary: #3B82F6;
    --primary-hover: #60A5FA;

    --border: #1E293B;

    --shadow: rgba(0, 0, 0, 0.3);
}


/* =========================
   LIGHT MODE
   ========================= */

body.light-mode {
    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --surface-hover: #F1F5F9;

    --text: #000000;
    --text-muted: #000000;

    --primary: #2563EB;
    --primary-hover: #1D4ED8;

    --border: #E2E8F0;

    --shadow: rgba(0, 0, 0, 0.08);
}


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

html,
body {
    background-color: var(--bg) !important;
    color: var(--text) !important;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


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

body,
body p,
body span,
body li,
body label,
body strong,
body b {
    color: var(--text);
}


/* =========================
   HEADINGS
   ========================= */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    color: var(--text) !important;
}


/* =========================
   PARAGRAPH
   ========================= */

body p {
    color: var(--text-muted) !important;
}


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

body a {
    color: var(--primary);
    transition: color 0.3s ease;
}

body a:hover {
    color: var(--primary-hover);
}


/* =========================
   LIGHT MODE - TEXT
   ========================= */

body.light-mode,
body.light-mode p,
body.light-mode span,
body.light-mode li,
body.light-mode label,
body.light-mode strong,
body.light-mode b,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: #000000 !important;
}


/* =========================
   LIGHT MODE - LINKS
   ========================= */

body.light-mode a {
    color: #000000 !important;
}

body.light-mode a:hover {
    color: #1D4ED8 !important;
}


/* =========================
   SURFACE / CARD
   ========================= */

.card,
.wp-block-group,
.wp-block-column {
    background-color: var(--surface);
    border-color: var(--border);

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


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

button,
.wp-block-button__link {
    background-color: var(--primary);
    color: #FFFFFF !important;

    border: none;

    transition:
        background-color 0.3s ease,
        transform 0.2s ease,
        box-shadow 0.3s ease;
}


button:hover,
.wp-block-button__link:hover {
    background-color: var(--primary-hover);
    color: #FFFFFF !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px var(--shadow);
}


/* =========================
   INPUT / TEXTAREA
   ========================= */

input,
textarea,
select {
    background-color: var(--surface) !important;
    color: var(--text) !important;

    border: 1px solid var(--border) !important;
}


input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}


/* =========================
   NAVIGATION
   ========================= */

nav,
header {
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


/* =========================
   BORDER
   ========================= */

hr {
    border-color: var(--border) !important;
}


/* =========================
   ICON
   ========================= */

svg {
    transition:
        fill 0.3s ease,
        color 0.3s ease;
}


/* =========================
   IMAGES
   ========================= */

img {
    transition: opacity 0.3s ease;
}


/* =========================
   SMOOTH TRANSITION
   ========================= */

body *,
body *::before,
body *::after {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


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

#theme-toggle {
    background: var(--surface);
    color: var(--text) !important;

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

    box-shadow:
        0 4px 12px var(--shadow);

    transition:
        all 0.3s ease;
}


#theme-toggle:hover {
    color: #FFFFFF !important;
}