/* ─────────────────────────────────────────────────────────────
   EUNARA — Shared Styles
   Import this in every page
───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700&family=Josefin+Sans:ital,wght@0,300;0,400;0,600;1,300&family=DM+Mono:wght@300;400&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --mauve:       #9b6b8a;
  --mauve-dark:  #7a5069;
  --mauve-mid:   #d4adc8;
  --mauve-light: #f5eaf2;
  --slate:       #5a6e8e;
  --slate-dark:  #3d5070;
  --slate-mid:   #a8b8d0;
  --slate-light: #e8edf8;
  --gold:        #c9922a;
  --gold-dark:   #a87520;
  --gold-mid:    #f0d090;
  --gold-light:  #fdf0d8;
  --terra:       #c47b5a;
  --terra-dark:  #a05e3f;
  --sage:        #7a9e7e;
  --sage-light:  #eaf3eb;
  --ink:         #1e1618;
  --ink-mid:     #4a3840;
  --ink-muted:   #9a8890;
  --bg:          #faf8f5;
  --bg2:         #f0eceb;
  --bg3:         #e6e0de;
  --ff-head: 'League Spartan', sans-serif;
  --ff-sub:  'Josefin Sans', sans-serif;
  --ff-mono: 'DM Mono', monospace;
  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
  --shadow-sm: 0 2px 8px rgba(30,22,24,0.07);
  --shadow-md: 0 6px 24px rgba(30,22,24,0.1);
  --shadow-lg: 0 16px 48px rgba(30,22,24,0.14);
}

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--ff-sub); background: var(--bg); color: var(--ink); overflow-x: hidden; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--ff-sub); cursor: pointer; }
img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--mauve-mid); border-radius: 3px; }

/* ── Shared Buttons ── */
.btn-primary {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.85rem 2rem;
  background: var(--mauve-dark); color: var(--mauve-light);
  border: none; border-radius: 2rem;
  transition: all 0.22s; cursor: pointer; display: inline-block;
}
.btn-primary:hover { background: var(--mauve); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(122,80,105,0.22); }

.btn-secondary {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.85rem 2rem;
  background: transparent; color: var(--slate-dark);
  border: 1.5px solid var(--slate-mid); border-radius: 2rem;
  transition: all 0.22s; cursor: pointer; display: inline-block;
}
.btn-secondary:hover { background: var(--slate-light); transform: translateY(-2px); }

.btn-ghost {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.65rem 1.5rem;
  background: transparent; color: var(--ink-muted);
  border: 1px solid var(--bg3); border-radius: 2rem;
  transition: all 0.2s; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--mauve-mid); color: var(--mauve-dark); }

.btn-danger {
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  background: #fee2e2; color: #b91c1c;
  border: 1px solid #fca5a5; border-radius: var(--radius-sm);
  transition: all 0.2s; cursor: pointer;
}
.btn-danger:hover { background: #fecaca; }

/* ── Shared Form Elements ── */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-family: var(--ff-sub);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mid); margin-bottom: 0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 0.8rem 1rem;
  border: 1.5px solid var(--bg3);
  border-radius: var(--radius-sm);
  font-family: var(--ff-sub);
  font-size: 0.9rem; color: var(--ink);
  background: var(--bg); outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--mauve-mid); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-muted); opacity: 0.6; }
.form-group textarea { resize: vertical; min-height: 100px; }

/* ── Toast Notifications ── */
#toast-container {
  position: fixed; bottom: 2rem; right: 2rem;
  z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem;
}
.toast {
  font-family: var(--ff-sub);
  font-size: 0.85rem; font-weight: 400;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: slideIn 0.3s ease, fadeOut 0.4s ease 2.6s forwards;
  max-width: 320px;
}
.toast.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.toast.error   { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.toast.info    { background: var(--slate-light); color: var(--slate-dark); border: 1px solid var(--slate-mid); }

@keyframes slideIn { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

/* ── Section Labels ── */
.section-label {
  font-family: var(--ff-mono);
  font-size: 0.68rem; letter-spacing: 0.18em;
  color: var(--mauve); text-transform: uppercase;
  margin-bottom: 0.6rem; display: block;
}
.section-h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.section-header { text-align: center; margin-bottom: 3.5rem; }

/* ── Status Badges ── */
.badge {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.25rem 0.75rem;
  border-radius: 2rem;
}
.badge-published { background: #d1fae5; color: #065f46; }
.badge-draft     { background: var(--bg3); color: var(--ink-muted); }
.badge-event     { background: var(--slate-light); color: var(--slate-dark); }
.badge-recipe    { background: var(--gold-light); color: var(--gold-dark); }
.badge-blog      { background: var(--mauve-light); color: var(--mauve-dark); }
.badge-admin     { background: var(--ink); color: var(--mauve-mid); }
.badge-user      { background: var(--bg2); color: var(--ink-mid); }