/* =========================
   BODY GLOBAL STYLE
========================= */
body {
    background: var(--mood-bg, #f8fafc);
    color: var(--text-color, #111);
    transition: all 0.3s ease;
}

/* =========================
   BUTTONS (GLOBAL CONTROL)
========================= */
button,
.btn,
.btn-primary {
    background: var(--mood-primary, #667eea);
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.3s ease;
}

button:hover,
.btn:hover,
.btn-primary:hover {
    opacity: 0.85;
    background: var(--mood-primary-dark, #5a67d8);
}

/* =========================
   CARDS
========================= */
.card {
    background: var(--mood-card, #ffffff);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid var(--mood-border, #e2e8f0);
    border-top: 3px solid var(--mood-primary, #667eea);
}

/* =========================
   LINKS
========================= */
a {
    color: var(--mood-primary, #667eea);
    text-decoration: none;
}

a:hover {
    opacity: 0.8;
}

/* =========================
   MOOD SHADOW
========================= */
.shadow-box {
    box-shadow: 0 8px 30px var(--mood-shadow, rgba(0,0,0,0.08));
}

/* =========================
   MOOD BORDER
========================= */
.border-mood {
    border: 2px solid var(--mood-border, #e2e8f0);
}