/* SpySEO Global Theme (Green / White / Soft-White)
   Goal: one source of truth for surfaces + brand green.
   Use px for UI components; keep Tailwind markup intact. */

:root{
  /* Surfaces (only 3) */
  --bg-white: #ffffff;
  --bg-soft: #f7f8fb;     /* soft-white */
  --bg-tint: #ecfdf5;     /* very light green tint */

  /* Brand green scale (single source) */
  --g-50:  #ecfdf5;
  --g-100: #d1fae5;
  --g-200: #a7f3d0;
  --g-300: #6ee7b7;
  --g-400: #34d399;
  --g-500: #10b981;
  --g-600: #059669;
  --g-700: #047857;
  --g-800: #065f46;
  --g-900: #064e3b;

  /* Neutrals */
  --text: #0b1220;
  --muted: rgba(11,18,32,.68);
  --border: rgba(11,18,32,.10);
  --shadow: 0 18px 55px rgba(11,18,32,.10);

  /* Component metrics (px-based) */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --btn-h: 44px;
  --btn-px: 18px;
}

html{ font-size: 16px; } /* keep predictable sizing */

/* Default page canvas */
body{
  background: var(--bg-white);
  color: var(--text);
}

/* Soft sections helper */
.ui-soft{ background: var(--bg-soft); }
.ui-tint{ background: var(--bg-tint); }

/* Unified primary button look (even if Tailwind differs) */
.btn-primary,
button.btn-primary,
a.btn-primary{
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--g-600) 0%, var(--g-500) 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.01em;
  border: 1px solid rgba(16,185,129,.25);
  box-shadow: 0 14px 35px rgba(16,185,129,.22);
}
.btn-primary:hover{ filter: brightness(1.03); }

/* Card baseline */
.ui-card{
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Force consistent green colors for Tailwind primary/emerald utilities */
.bg-primary-500{ background-color: var(--g-500) !important; }
.bg-primary-600{ background-color: var(--g-600) !important; }
.bg-primary-700{ background-color: var(--g-700) !important; }
.text-primary-500{ color: var(--g-500) !important; }
.text-primary-600{ color: var(--g-600) !important; }
.border-primary-500{ border-color: rgba(16,185,129,.35) !important; }

.bg-emerald-500{ background-color: var(--g-500) !important; }
.bg-emerald-600{ background-color: var(--g-600) !important; }
.bg-emerald-700{ background-color: var(--g-700) !important; }

/* White text only when the element actually has a green bg class.
   (Avoid matching Tailwind variants like hover:bg-primary-600) */
button.bg-primary-500, button.bg-primary-600, button.bg-primary-700,
button.bg-emerald-500, button.bg-emerald-600, button.bg-emerald-700,
button.bg-green-500, button.bg-green-600, button.bg-green-700,
a.bg-primary-500, a.bg-primary-600, a.bg-primary-700,
a.bg-emerald-500, a.bg-emerald-600, a.bg-emerald-700,
a.bg-green-500, a.bg-green-600, a.bg-green-700,
[role="button"].bg-primary-500, [role="button"].bg-primary-600, [role="button"].bg-primary-700,
[role="button"].bg-emerald-500, [role="button"].bg-emerald-600, [role="button"].bg-emerald-700,
[role="button"].bg-green-500, [role="button"].bg-green-600, [role="button"].bg-green-700{
  color:#fff !important;
}
button.bg-primary-500 *, button.bg-primary-600 *, button.bg-primary-700 *,
button.bg-emerald-500 *, button.bg-emerald-600 *, button.bg-emerald-700 *,
button.bg-green-500 *, button.bg-green-600 *, button.bg-green-700 *,
a.bg-primary-500 *, a.bg-primary-600 *, a.bg-primary-700 *,
a.bg-emerald-500 *, a.bg-emerald-600 *, a.bg-emerald-700 *,
a.bg-green-500 *, a.bg-green-600 *, a.bg-green-700 *,
[role="button"].bg-primary-500 *, [role="button"].bg-primary-600 *, [role="button"].bg-primary-700 *,
[role="button"].bg-emerald-500 *, [role="button"].bg-emerald-600 *, [role="button"].bg-emerald-700 *,
[role="button"].bg-green-500 *, [role="button"].bg-green-600 *, [role="button"].bg-green-700 *{
  color:#fff !important;
}