/* =====================================================
   FSN BASE – Design Tokens, Reset, Typography
   Palette: Forest Green · Pitch White · Signal Yellow
   ===================================================== */

/* ---------- GOOGLE FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- DESIGN TOKENS (Light) ---------- */
:root {
  /* Core palette */
  --green-900:  #0a2e1a;
  --green-800:  #0f4029;
  --green-700:  #155c38;
  --green-600:  #1a7845;
  --green-500:  #21963a;   /* primary brand */
  --green-400:  #3ab852;
  --green-300:  #6dd68a;
  --green-100:  #d4f5dc;
  --green-50:   #f0faf3;

  --yellow-500: #f5c800;   /* signal accent */
  --yellow-400: #f7d340;
  --yellow-100: #fef9d7;

  --white:      #ffffff;
  --off-white:  #f8f9f7;
  --gray-50:    #f2f4f1;
  --gray-100:   #e4e8e3;
  --gray-200:   #c8cec7;
  --gray-400:   #8c9b8a;
  --gray-600:   #4e5d4c;
  --gray-800:   #2a332a;
  --black:      #0d140e;

  /* Semantic */
  --bg:             var(--off-white);
  --bg-secondary:   var(--gray-50);
  --surface:        var(--white);
  --surface-alt:    var(--green-50);
  --border:         var(--gray-100);
  --border-strong:  var(--gray-200);
  --text-primary:   var(--gray-800);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-400);
  --accent:         var(--green-500);
  --accent-dark:    var(--green-700);
  --accent-light:   var(--green-100);
  --highlight:      var(--yellow-500);
  --highlight-bg:   var(--yellow-100);
  --danger:         #e03a3a;
  --danger-bg:      #fdeaea;
  --success:        var(--green-500);
  --success-bg:     var(--green-50);

  /* Typography */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Sizes */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* Radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(10,46,26,.08), 0 1px 2px rgba(10,46,26,.05);
  --shadow-md: 0 4px 12px rgba(10,46,26,.10), 0 2px 4px rgba(10,46,26,.06);
  --shadow-lg: 0 10px 28px rgba(10,46,26,.13), 0 4px 8px rgba(10,46,26,.07);
  --shadow-glow: 0 0 0 3px rgba(33,150,58,.22);

  /* Transitions */
  --transition: 0.18s cubic-bezier(.4,0,.2,1);
  --transition-slow: 0.32s cubic-bezier(.4,0,.2,1);

  /* Layout */
  --max-w: 1120px;
  --nav-h: 60px;
  --bottom-nav-h: 60px;
}

/* ---------- DARK MODE TOKENS ---------- */
html.dark {
  --bg:             #0d1710;
  --bg-secondary:   #111d13;
  --surface:        #172119;
  --surface-alt:    #1a2b1c;
  --border:         #1f3022;
  --border-strong:  #2a4030;
  --text-primary:   #e8f0e9;
  --text-secondary: #9cb49e;
  --text-muted:     #5c7a5e;
  --accent:         var(--green-400);
  --accent-dark:    var(--green-300);
  --accent-light:   #1e3a22;
  --highlight:      var(--yellow-500);
  --highlight-bg:   #2a2410;
  --danger:         #f07070;
  --danger-bg:      #2a1010;
  --success:        var(--green-400);
  --success-bg:     #1a2e1c;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.45);
  --shadow-glow: 0 0 0 3px rgba(58,184,82,.20);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  transition: background var(--transition-slow), color var(--transition-slow);
  overflow-x: hidden;
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-4xl); font-weight: 600; }
h2 { font-size: var(--text-3xl); font-weight: 600; }
h3 { font-size: var(--text-xl);  font-weight: 600; }
h4 { font-size: var(--text-lg);  font-weight: 500; }

p  { color: var(--text-secondary); line-height: 1.7; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--accent-dark); text-decoration: underline; }

img { max-width: 100%; display: block; }

ul, ol { list-style: none; }

input, textarea, select, button { font-family: var(--font-body); }

/* ---------- UTILITY ---------- */
.hidden { display: none !important; }

.spin {
  animation: spin 1s linear infinite;
  display: inline-block;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.message { font-size: var(--text-sm); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }

.error {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid rgba(224,58,58,.2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.6rem 1.25rem;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--white);
  text-decoration: none;
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-outline:hover {
  background: var(--accent);
  color: var(--white);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
  border-color: #25D366;
}
.btn-whatsapp:hover {
  background: #1da851;
  border-color: #1da851;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  transition: all var(--transition);
}
.icon-btn:hover {
  color: var(--accent);
  background: var(--accent-light);
}

/* ---------- FORMS ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2321963a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 2.5rem;
  cursor: pointer;
}

textarea { resize: vertical; min-height: 120px; }

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- SENTINEL / SPINNER ---------- */
.sentinel { height: 40px; }

.spinner {
  display: flex;
  justify-content: center;
  padding: var(--sp-8);
  color: var(--accent);
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--green-300); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- MODAL BASE ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn .2s ease;
}
.modal.hidden { display: none !important; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- BADGE ---------- */
.status-badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-published  { background: var(--green-100);  color: var(--green-700); }
.status-draft      { background: var(--gray-100);   color: var(--gray-600); }
.status-scheduled  { background: var(--highlight-bg); color: #8a6e00; }
.status-active     { background: var(--green-100);  color: var(--green-700); }
.status-suspended  { background: var(--danger-bg);  color: var(--danger); }
.status-pending_terms { background: var(--highlight-bg); color: #8a6e00; }

html.dark .status-published  { background: var(--accent-light); color: var(--green-300); }
html.dark .status-active     { background: var(--accent-light); color: var(--green-300); }
html.dark .status-draft      { background: var(--border); color: var(--text-muted); }
html.dark .status-scheduled  { background: var(--highlight-bg); color: var(--yellow-400); }
html.dark .status-suspended  { background: var(--danger-bg); color: var(--danger); }
html.dark .status-pending_terms { background: var(--highlight-bg); color: var(--yellow-400); }

/* ---------- TABLE BASE ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
thead { background: var(--green-900); }
html.dark thead { background: var(--green-800); }
thead th {
  color: var(--white);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface-alt); }
td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-secondary);
  vertical-align: middle;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}