/* BaitoCrypto.fun Premium System
   Small, additive layer: tokens + utilities + core components.
   Designed to NOT break existing styles.
*/

:root{
  /* Color tokens aligned to current neon-dark vibe */
  --cf-bg-0:#070b12;
  --cf-bg-1:#0c1220;
  --cf-bg-2:#111a2e;
  --cf-bg-3:#16223a;

  --cf-neon:#00ffd5;
  --cf-neon-2:#00ffb2;
  --cf-neon-purple:#7f5cff;

  --cf-text-0:#e6e9f0;
  --cf-text-1:#cfd6ff;
  --cf-text-2:#9aa6c9;
  --cf-text-3:#7f8bb4;

  --cf-danger:#ff4d4f;
  --cf-warning:#ffb020;

  /* Radii */
  --cf-r-lg:18px;
  --cf-r-md:14px;
  --cf-r-sm:10px;

  /* Spacing scale */
  --cf-s-1:8px;
  --cf-s-2:12px;
  --cf-s-3:16px;
  --cf-s-4:20px;
  --cf-s-5:28px;
  --cf-s-6:36px;
  --cf-s-7:48px;

  /* Shadows */
  --cf-shadow-soft:0 10px 30px rgba(0,0,0,.35);
  --cf-shadow-neon:0 0 22px rgba(0,255,213,.18);

  /* Motion */
  --cf-ease:cubic-bezier(.4,0,.2,1);
  --cf-t-fast:.18s var(--cf-ease);
  --cf-t-med:.32s var(--cf-ease);
}

/* Typography baseline (additive) */
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utilities */
.cf-muted{ color: var(--cf-text-3); }
.cf-dim{ color: var(--cf-text-2); }
.cf-stack{ display:flex; flex-direction:column; gap:var(--cf-s-3); }
.cf-row{ display:flex; align-items:center; gap:var(--cf-s-3); }
.cf-wrap{ flex-wrap:wrap; }

/* Premium Card (opt-in class) */
.cf-card{
  background: rgba(17,26,46,.72);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--cf-r-lg);
  box-shadow: var(--cf-shadow-soft);
}

.cf-card--padded{ padding: var(--cf-s-5); }

/* Buttons (opt-in) */
.cf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: var(--cf-r-md);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(12,18,32,.55);
  color: var(--cf-text-1);
  font-weight: 600;
  cursor:pointer;
  transition: transform var(--cf-t-fast), box-shadow var(--cf-t-fast), background var(--cf-t-fast), border-color var(--cf-t-fast);
}

.cf-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,255,213,.25);
  box-shadow: var(--cf-shadow-neon);
}

.cf-btn:active{ transform: translateY(0) scale(.98); }

.cf-btn--primary{
  background: linear-gradient(135deg, rgba(0,255,213,.95), rgba(127,92,255,.85));
  color: #071018;
  border-color: rgba(255,255,255,.08);
}

.cf-btn--danger:hover{
  border-color: rgba(255,77,79,.4);
  box-shadow: 0 0 18px rgba(255,77,79,.18);
}

/* Badges */
.cf-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(12,18,32,.55);
  color: var(--cf-text-2);
  font-size: 12px;
  font-weight: 600;
}

.cf-badge--neon{
  background: rgba(0,255,213,.10);
  color: var(--cf-neon);
  border-color: rgba(0,255,213,.22);
}