/* ====================================================================
   BASE.CSS — Reset, variables, typography
   ==================================================================== */

:root{
  /* Skinya brand palette — but adapted for dashboard professionalism */
  --bg:           #0f0e10;
  --bg-elev-1:    #18171a;
  --bg-elev-2:    #1f1d22;
  --bg-elev-3:    #2a272d;
  --border:       rgba(255,255,255,0.08);
  --border-soft:  rgba(255,255,255,0.05);
  --text:         #f5e8d9;
  --text-soft:    #c9b9a6;
  --text-dim:     #8d8088;
  --accent:       #c0857a;      /* terracotta */
  --gold:         #d4ad8a;
  --plum:         #5a3950;
  --success:      #4caf7a;
  --warn:         #d4a45c;
  --danger:       #d96c6c;
  --info:         #5b8eb5;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:    0 24px 50px -10px rgba(0,0,0,0.5);
  --radius:       8px;
  --ease:         cubic-bezier(.7,.0,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:'Cormorant Garamond', serif;font-weight:500;letter-spacing:-.01em;color:var(--text);margin:0}
h1{font-size:1.7rem}
h2{font-size:1.3rem}
h3{font-size:1.1rem}

a{color:inherit;text-decoration:none;cursor:pointer}
button{font-family:inherit;cursor:pointer}

/* ──────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────── */
.btn-primary{
  background:var(--accent);color:var(--bg);border:0;
  padding:.75rem 1.4rem;font-weight:600;font-size:.78rem;
  letter-spacing:.22em;text-transform:uppercase;
  border-radius:var(--radius);cursor:pointer;
  transition:filter .2s, transform .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
}
.btn-primary:hover{filter:brightness(1.1)}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}

.btn-ghost{
  background:transparent;color:var(--text-soft);border:1px solid var(--border);
  padding:.55rem 1rem;font-size:.78rem;font-weight:500;
  border-radius:var(--radius);transition:all .2s;
}
.btn-ghost:hover{background:var(--bg-elev-2);color:var(--text);border-color:var(--text-dim)}

.btn-danger{
  background:rgba(217,108,108,0.12);color:var(--danger);border:1px solid rgba(217,108,108,0.3);
  padding:.5rem 1rem;font-size:.78rem;font-weight:500;
  border-radius:var(--radius);transition:all .2s;
}
.btn-danger:hover{background:rgba(217,108,108,0.22)}

/* ──────────────────────────────────────────────────────────────
   TOAST
   ────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:2rem;left:50%;
  transform:translateX(-50%) translateY(150%);
  background:var(--text);color:var(--bg);
  padding:.85rem 1.6rem;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  z-index:300;border-radius:var(--radius);
  transition:transform .35s var(--ease);
  box-shadow:var(--shadow-md);
  max-width:90vw;text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ──────────────────────────────────────────────────────────────
   MODAL
   ────────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  opacity:0;transition:opacity .25s;
}
.modal-overlay.open{opacity:1}
.modal-overlay[hidden]{display:none !important}
.modal-panel{
  background:var(--bg-elev-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  width:min(720px, 100%);max-height:90vh;
  padding:2rem;
  overflow-y:auto;
  position:relative;
  transform:translateY(-12px) scale(.98);
  transition:transform .3s var(--ease);
  box-shadow:var(--shadow-lg);
}
.modal-overlay.open .modal-panel{transform:none}
.modal-close{
  position:absolute;top:.9rem;right:.9rem;
  background:transparent;border:0;cursor:pointer;
  font-size:1.1rem;color:var(--text-dim);
  padding:.5rem .7rem;line-height:1;border-radius:6px;
}
.modal-close:hover{background:var(--bg-elev-2);color:var(--text)}

/* ──────────────────────────────────────────────────────────────
   UTIL
   ────────────────────────────────────────────────────────────── */
.link{color:var(--accent);font-size:.78rem;font-weight:500;letter-spacing:.06em;cursor:pointer}
.link:hover{filter:brightness(1.15)}
.muted{color:var(--text-dim)}