/* ============================================================
   Spicy Memes — Rosebud Theme
   Overrides Bootstrap with the warm pastel Rosebud palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  --bg:         #fdf6ee;
  --surface0:   #f5ead9;
  --surface1:   #ecdcc6;
  --surface2:   #e0ccb3;
  --overlay:    #d4bda0;

  --text:       #4a3728;
  --subtext1:   #7a5f4d;
  --subtext0:   #9e8070;

  --rose:       #e8a0b0;
  --rose-dark:  #c4687c;
  --flamingo:   #edb49a;
  --peach:      #f0c98a;
  --peach-dark: #c8933a;
  --yellow:     #e8de9a;
  --green:      #a8d8b0;
  --green-dark: #5a9e68;
  --teal:       #96cfc8;
  --sky:        #a8c8e8;
  --lavender:   #c0b0e0;
  --mauve:      #d0a8d0;
  --mauve-dark: #7a4a8a;
  --pink:       #e8b0c8;

  --font-display: 'Pacifico', cursive;
  --font-body:    'Nunito', sans-serif;
  --radius:        10px;
  --radius-sm:     6px;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

a { color: var(--teal); }
a:hover { color: #5aada3; }

/* ── Header / branding ────────────────────────────────────── */
.header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--mauve-dark) !important;
  letter-spacing: 0.01em;
}

.header h1 .fa-pepper-hot,
.header h1 i {
  color: var(--rose-dark) !important;
}

.discription {
  color: var(--subtext1) !important;
}

/* ── Meme grid ────────────────────────────────────────────── */
.choice-section {
  background: var(--bg);
}

.choice p {
  color: var(--subtext1);
}

.text-danger {
  color: var(--rose-dark) !important;
}

.grid-item img {
  border-radius: var(--radius-sm);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  transition: filter 0.15s, transform 0.1s;
}
.btn:hover { filter: brightness(0.93); transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(0.88); }

/* warning (edit tools, font style, alignment) → peach */
.btn-warning {
  background-color: var(--peach) !important;
  color: var(--text) !important;
  border: none !important;
}
.btn-warning:hover, .btn-warning:focus {
  background-color: var(--peach) !important;
  color: var(--text) !important;
}
.btn-warning.active {
  background-color: var(--flamingo) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15) !important;
}

/* danger (back button) → rose */
.btn-danger {
  background-color: var(--rose) !important;
  color: var(--text) !important;
  border: none !important;
}
.btn-danger:hover { background-color: var(--rose) !important; }

/* success (generate) → green */
.btn-success {
  background-color: var(--green) !important;
  color: var(--text) !important;
  border: none !important;
}
.btn-success:hover { background-color: var(--green) !important; }

/* dark badge (GitHub link) → mauve */
.badge-dark {
  background-color: var(--mauve) !important;
  color: var(--text) !important;
}

/* ── File upload label ────────────────────────────────────── */
.choice label,
.custom-file-label {
  background-color: var(--mauve) !important;
  color: var(--text) !important;
  border: none !important;
  font-weight: 600;
}

/* ── Form controls ────────────────────────────────────────── */
.form-control,
.form-control:focus,
textarea.form-control {
  background-color: var(--surface0);
  color: var(--text);
  border: 1px solid var(--surface2);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

.form-control:focus {
  border-color: var(--mauve);
  box-shadow: 0 0 0 0.2rem rgba(208, 168, 208, 0.35);
}

label {
  color: var(--subtext1);
  font-weight: 600;
}

/* ── Bootstrap-select dropdown ────────────────────────────── */
.bootstrap-select .dropdown-toggle {
  background-color: var(--surface0) !important;
  color: var(--text) !important;
  border: 1px solid var(--surface2) !important;
  font-family: var(--font-body);
}

.dropdown-menu {
  background-color: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: var(--radius-sm);
}

.dropdown-item {
  color: var(--text);
  font-family: var(--font-body);
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--surface1);
  color: var(--text);
}

/* ── Range sliders ────────────────────────────────────────── */
.form-control-range {
  accent-color: var(--mauve);
}

/* ── Input group text (colorpicker swatch holder) ─────────── */
.input-group-text {
  background-color: var(--surface1);
  border: 1px solid var(--surface2);
  color: var(--text);
}

/* ── Meme preview border ──────────────────────────────────── */
.meme-preview {
  border: 2px solid var(--surface1) !important;
  border-radius: var(--radius);
  overflow: hidden;
}

/* ── Add-btns separator ───────────────────────────────────── */
.add-btns {
  border-bottom: 1px solid var(--surface1) !important;
}

/* ── Alert ────────────────────────────────────────────────── */
.alert-danger {
  background-color: var(--rose) !important;
  border-color: var(--rose-dark) !important;
  color: var(--text) !important;
}

/* ── Edit section bg ──────────────────────────────────────── */
.edit-section {
  background-color: var(--bg);
  padding-top: 1rem;
  padding-bottom: 2rem;
}