/* Root Theme Colors */
:root {
    --bg-dark: #0d1117;
    --bg-card: #161b22;
    --bg-card-hover: #1d242d;

    --border-dark: #30363d;
    --border-light: #3a4550;

    --text-primary: #e6edf3;
    --text-muted: #8b949e;

    --btn-blue: #204066;
    --btn-blue-hover: #264d75;

    --btn-ash: #30363d;
    --btn-ash-hover: #292e34;

    --btn-amber: #f59e0b;
    --btn-amber-hover: #d48a09;

    --btn-red: #f43f5e;
    --btn-red-hover: #d8344e;

    --accent-cyan: #58a6ff;
}

/* Utility Classes */

/*** Backgrounds ***/
.bg-dark { background: var(--bg-dark); }
.bg-card { background: var(--bg-card); }
.bg-card-hover:hover { background: var(--bg-card-hover); }

/*** Borders ***/
.border-dark { border: 1px solid var(--border-dark); }
.border-light { border: 1px solid var(--border-light); }

/*** Text Colors ***/
.text-primary { color: var(--text-primary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-cyan); }

/*** Buttons ***/
.btn-blue {
    background: var(--btn-blue);
    color: var(--text-primary);
}
.btn-blue:hover { background: var(--btn-blue-hover); }

.btn-ash {
    background: var(--btn-ash);
    color: var(--text-primary);
}
.btn-ash:hover { background: var(--btn-ash-hover); }

.btn-amber {
    background: var(--btn-amber);
    color: var(--bg-dark);
}
.btn-amber:hover { background: var(--btn-amber-hover); }

.btn-red {
    background: var(--btn-red);
    color: var(--text-primary);
}
.btn-red:hover { background: var(--btn-red-hover); }

/*** Smooth transitions ***/
.transition { transition: 0.2s ease; }