/* ============================================================
   ListenField — Shared Design Tokens & Base Styles
   Based on Corporate Identity Guide 2026 v1.0
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

/* --- Design Tokens --- */
:root {
  /* Colors */
  --midnight:    #080D14;
  --deep:        #0D1520;
  --surface:     #111C2E;
  --border:      rgba(255, 255, 255, 0.07);
  --lime:        #CAFF70;
  --lime-08:     rgba(202, 255, 112, 0.08);
  --lime-15:     rgba(202, 255, 112, 0.15);
  --teal:        #00C9D4;
  --teal-08:     rgba(0, 201, 212, 0.08);
  --violet:      #8B6CF7;
  --violet-08:   rgba(139, 108, 247, 0.08);
  --white:       #FFFFFF;
  --cool:        #F0F4F8;
  --dim:         rgba(255, 255, 255, 0.45);
  --mid:         rgba(255, 255, 255, 0.65);

  /* Semantic — Traffic Light */
  --status-green:  #4ADE80;
  --status-yellow: #FACC15;
  --status-red:    #F87171;

  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-full: 100px;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--midnight);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--lime); color: var(--midnight); }

/* --- Card --- */
.lf-card {
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}

/* --- Section Tag / Eyebrow --- */
.lf-tag {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: var(--space-sm);
}

/* --- Heading --- */
.lf-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
}
.lf-heading em { font-style: normal; color: var(--lime); }

/* --- Body text --- */
.lf-body {
  font-size: 14px;
  color: var(--mid);
  line-height: 1.75;
}

/* --- Data text --- */
.lf-data {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--lime);
}

/* --- Pill button --- */
.lf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.lf-pill-primary {
  background: var(--lime);
  color: var(--midnight);
}
.lf-pill-primary:hover { background: var(--white); }
.lf-pill-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--mid);
}
.lf-pill-ghost:hover { border-color: var(--lime); color: var(--lime); }
.lf-pill-danger {
  background: rgba(248, 113, 113, 0.1);
  color: var(--status-red);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

/* --- Widget container --- */
.lf-widget {
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lf-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.lf-widget-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
}
.lf-widget-body {
  padding: var(--space-lg);
}

/* --- Utility --- */
.lf-flex { display: flex; }
.lf-flex-col { flex-direction: column; }
.lf-items-center { align-items: center; }
.lf-justify-between { justify-content: space-between; }
.lf-gap-sm { gap: var(--space-sm); }
.lf-gap-md { gap: var(--space-md); }
.lf-gap-lg { gap: var(--space-lg); }
.lf-text-dim { color: var(--dim); }
.lf-text-mid { color: var(--mid); }