/* Wifisia Brand CSS */
:root {
  --aurora-950: #03140f;
  --aurora-900: #05261c;
  --aurora-800: #063a2a;
  --aurora-700: #08543e;
  --aurora-600: #0a6b52;
  --aurora-500: #0f8a6b;
  --aurora-400: #19b58a;
  --aurora-300: #39d6aa;
  --aurora-200: #7ff0cf;

  --wfs-bg: var(--aurora-950);
  --wfs-surface: rgba(255,255,255,0.06);
  --wfs-border: rgba(255,255,255,0.12);
  --wfs-text: rgba(255,255,255,0.92);
  --wfs-text-muted: rgba(255,255,255,0.7);
  --wfs-primary: var(--aurora-400);

  --wfs-radius-lg: 18px;
  --wfs-radius-md: 14px;
}

.wfs-card {
  background: var(--wfs-surface);
  border: 1px solid var(--wfs-border);
  border-radius: var(--wfs-radius-lg);
  padding: 20px;
}

.wfs-btn {
  background: linear-gradient(135deg, #19b58a, #39d6aa);
  color: #041b14;
  padding: 12px 18px;
  border-radius: var(--wfs-radius-md);
  font-weight: 700;
  border: none;
}

.wfs-btn-ghost {
  background: transparent;
  border: 1px solid var(--wfs-border);
  color: var(--wfs-text);
}

.wfs-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--wfs-border);
  border-radius: var(--wfs-radius-md);
  padding: 12px;
  color: var(--wfs-text);
}

/* Aurora gradient background */
.wfs-aurora-bg {
  background:
    radial-gradient(1200px 700px at 20% 15%, rgba(25,181,138,0.25), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(57,214,170,0.18), transparent 55%),
    linear-gradient(180deg, var(--aurora-950), var(--aurora-900));
}