/* =========================
    COLORS
========================= */
:root {
    --teal:#00897b;
    --amber:#ffb300;
    --indigo:#3949ab;
    --mint:#2ecc71;
    --rose:#e91e63;
    --slate:#455a64;
}

.btn-teal:hover, .btn-amber:hover, .btn-indigo:hover, .btn-mint:hover, .btn-rose:hover, .btn-slate:hover {
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    transform:translateY(-1px);
}

.btn-teal:active, .btn-amber:active, .btn-indigo:active, .btn-mint:active, .btn-rose:active, .btn-slate:active {
    box-shadow:0 2px 4px rgba(0,0,0,.15);
    transform:translateY(0);
}

/* ===== BUTTON VARIANTS ===== */
.btn-teal { background: var(--teal); }
.btn-amber { background: var(--amber); }
.btn-indigo { background: var(--indigo); }
.btn-mint { background: var(--mint); }
.btn-rose { background: var(--rose); }
.btn-slate { background: var(--slate); }

/* BUTTON OUTLINE */
.btn-outline-teal { border:1px solid var(--teal); color:var(--teal); background:transparent; }
.btn-outline-amber { border:1px solid var(--amber); color:var(--amber); background:transparent; }
.btn-outline-indigo { border:1px solid var(--indigo); color:var(--indigo); background:transparent; }
.btn-outline-mint { border:1px solid var(--mint); color:var(--mint); background:transparent; }
.btn-outline-rose { border:1px solid var(--rose); color:var(--rose); background:transparent; }
.btn-outline-slate { border:1px solid var(--slate); color:var(--slate); background:transparent; }

/* BUTTON SOFT */
.btn-soft-teal { background: rgba(0,137,123,0.15); color:var(--teal); }
.btn-soft-amber { background: rgba(255,179,0,0.15); color:var(--amber); }
.btn-soft-indigo { background: rgba(57,73,171,0.15); color:var(--indigo); }
.btn-soft-mint { background: rgba(46,204,113,0.15); color:var(--mint); }
.btn-soft-rose { background: rgba(233,30,99,0.15); color:var(--rose); }
.btn-soft-slate { background: rgba(69,90,100,0.15); color:var(--slate); }

/* =========================
    BACKGROUND / TEXT / BORDER / HOVER
========================= */
.bg-teal { background: var(--teal); }
.bg-amber { background: var(--amber); }
.bg-indigo { background: var(--indigo); }
.bg-mint { background: var(--mint); }
.bg-rose { background: var(--rose); }
.bg-slate { background: var(--slate); }

.text-teal { color: var(--teal); }
.text-amber { color: var(--amber); }
.text-indigo { color: var(--indigo); }
.text-mint { color: var(--mint); }
.text-rose { color: var(--rose); }
.text-slate { color: var(--slate); }

/* BORDER */
.border-teal { border:1px solid var(--teal); }
.border-top-teal { border-top:1px solid var(--teal); }
.border-right-teal { border-right:1px solid var(--teal); }
.border-bottom-teal { border-bottom:1px solid var(--teal); }
.border-left-teal { border-left:1px solid var(--teal); }

.border-amber,.border-top-amber,.border-right-amber,.border-bottom-amber,.border-left-amber{border-color:var(--amber);}
.border-indigo,.border-top-indigo,.border-right-indigo,.border-bottom-indigo,.border-left-indigo{border-color:var(--indigo);}
.border-mint,.border-top-mint,.border-right-mint,.border-bottom-mint,.border-left-mint{border-color:var(--mint);}
.border-rose,.border-top-rose,.border-right-rose,.border-bottom-rose,.border-left-rose{border-color:var(--rose);}
.border-slate,.border-top-slate,.border-right-slate,.border-bottom-slate,.border-left-slate{border-color:var(--slate);}

.btn-soft-teal:hover, .btn-outline-teal:hover { background: var(--teal); color: #fff;}
.btn-soft-amber:hover, .btn-outline-amber:hover { background: var(--amber); color: #fff;}
.btn-soft-indigo:hover, .btn-outline-indigo:hover { background: var(--indigo); color: #fff;}
.btn-soft-mint:hover, .btn-outline-mint:hover { background: var(--mint); color: #fff;}
.btn-soft-rose:hover, .btn-outline-rose:hover { background: var(--rose); color: #fff;}
.btn-soft-slate:hover, .btn-outline-slate:hover { background: var(--slate); color: #fff;}

/* =========================
    BADGES
========================= */
.badge-teal { background: var(--teal); color:#fff; }
.badge-outline-teal { border:1px solid var(--teal); color:var(--teal); background:transparent; }
.badge-soft-teal { background: rgba(0,137,123,0.15); color:var(--teal); }

/* repeat for other colors */
.badge-amber { background: var(--amber); color:#fff; }
.badge-outline-amber { border:1px solid var(--amber); color:var(--amber); background:transparent; }
.badge-soft-amber { background: rgba(255,179,0,0.15); color:var(--amber); }

.badge-indigo { background: var(--indigo); color:#fff; }
.badge-outline-indigo { border:1px solid var(--indigo); color:var(--indigo); background:transparent; }
.badge-soft-indigo { background: rgba(57,73,171,0.15); color:var(--indigo); }

.badge-mint { background: var(--mint); color:#fff; }
.badge-outline-mint { border:1px solid var(--mint); color:var(--mint); background:transparent; }
.badge-soft-mint { background: rgba(46,204,113,0.15); color:var(--mint); }

.badge-rose { background: var(--rose); color:#fff; }
.badge-outline-rose { border:1px solid var(--rose); color:var(--rose); background:transparent; }
.badge-soft-rose { background: rgba(233,30,99,0.15); color:var(--rose); }

.badge-slate { background: var(--slate); color:#fff; }
.badge-outline-slate { border:1px solid var(--slate); color:var(--slate); background:transparent; }
.badge-soft-slate { background: rgba(69,90,100,0.15); color:var(--slate); }