/* ===========================================================
   SMSFROGE Design System — shared tokens + base components.
   Every page (public site, and later client/admin dashboards)
   imports this file first, then a page-specific stylesheet.
   Tokens are taken directly from the approved homepage prototype
   so the whole platform stays visually consistent.
   =========================================================== */

:root{
  --bg:#050c0b;
  --panel:#0b1514;
  --panel-2:#0f1e1c;
  --text:#f4f7f5;
  --muted:#9fb0a8;
  --green:#67f35a;
  --green-2:#2bd16d;
  --blue:#4da9ff;
  --purple:#8d65ff;
  --red:#ff6b6b;
  --amber:#ffb648;
  --line:rgba(255,255,255,.09);
  --glow:0 0 30px rgba(103,243,90,.25);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:28px;
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:
    radial-gradient(circle at 75% 10%, rgba(41,100,54,.18), transparent 30%),
    linear-gradient(180deg,#050b0a,#07100f 55%,#040a09);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1450px,92vw);margin:auto}

/* Focus visibility — never remove outline without replacing it */
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---- Buttons ---- */
.btn{
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:#fff;
  padding:12px 20px;border-radius:var(--radius-sm);cursor:pointer;position:relative;overflow:hidden;
  transition:transform .2s,border-color .2s,box-shadow .2s;font-size:14px;font-family:inherit;
  display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{transform:translateY(-2px);border-color:rgba(103,243,90,.45)}
.btn.primary{
  border:0;color:#071008;font-weight:800;
  background:linear-gradient(135deg,var(--green),#b4ff57);
  box-shadow:var(--glow)
}
.btn.ghost{background:transparent;border-color:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---- Badges / status chips ---- */
.badge{
  width:max-content;padding:8px 13px;border:1px solid rgba(103,243,90,.3);
  color:#c9ffd0;border-radius:999px;background:rgba(103,243,90,.06);
  font-size:13px;display:inline-flex;align-items:center;gap:6px;
}
.chip{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;display:inline-block}
.chip.success{background:rgba(103,243,90,.12);color:#8dffa0;border:1px solid rgba(103,243,90,.25)}
.chip.warning{background:rgba(255,182,72,.12);color:#ffcf8d;border:1px solid rgba(255,182,72,.25)}
.chip.danger{background:rgba(255,107,107,.12);color:#ffb0b0;border:1px solid rgba(255,107,107,.25)}
.chip.neutral{background:rgba(255,255,255,.06);color:#c7d3ce;border:1px solid var(--line)}

/* ---- Cards ---- */
.card{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;
  background:linear-gradient(180deg,#0c1816,#081210);position:relative;overflow:hidden;
}

/* ---- Forms ---- */
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text);font-family:inherit;font-size:14px;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(103,243,90,.5)}
.form-error{color:var(--red);font-size:13px;margin-top:8px}
.form-success{color:var(--green);font-size:13px;margin-top:8px}

/* ---- Empty / loading / error states ---- */
.state-block{padding:48px 24px;text-align:center;color:var(--muted)}
.state-block .icon{font-size:36px;margin-bottom:12px;opacity:.6}
.spinner{
  width:20px;height:20px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--green);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Toasts ---- */
.toast-stack{position:fixed;top:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:10px;width:320px}
.toast{
  padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:rgba(10,20,18,.95);backdrop-filter:blur(14px);font-size:13px;
  display:flex;align-items:flex-start;gap:10px;box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.toast.success{border-color:rgba(103,243,90,.35)}
.toast.error{border-color:rgba(255,107,107,.35)}

@media (max-width:650px){
  .toast-stack{left:16px;right:16px;width:auto}
}