/* =========================
   AlienTextGenerator Global Theme (Palette #1)
   Goal: reduce eye strain + keep brand identity
========================= */

:root{
  /* Base backgrounds */
  --bg-main: #F4F7F5;        /* Soft off-white */
  --bg-card: #FFFFFF;        /* Cards */

  /* Typography */
  --text-main: #1F2937;      /* Soft charcoal */
  --text-muted: #6B7280;     /* Muted text */

  /* Borders + Dividers */
  --border-soft: #E5E7EB;    /* Soft border */

  /* Brand */
  --brand-green: #5DC243;    /* Alien green */
  --brand-yellow: #cbccfe;   /* Softer yellow */
  --accent-blue: #2F80ED;    /* Rare use only */

  /* Shadows */
  --shadow-soft: 0 8px 24px rgba(0,0,0,0.06);
  --shadow-card: 0 10px 30px rgba(0,0,0,0.08);

  /* Radius */
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

/* Global background + text */
html, body{
  background: var(--bg-main);
  color: var(--text-main);
}

/* Make reading calmer */
p, li, small, span, a{
  color: inherit;
}
p{
  color: var(--text-muted);
  line-height: 1.75;
}

/* Links (calm, readable) */
a{
  color: var(--text-main);
  text-decoration: none;
}
a:hover{
  opacity: 0.92;
}

/* Replace harsh borders globally (safe override) */
*{
  border-color: var(--border-soft);
}

/* Cards: soften heavy black borders + comic shadows */
.featured-card,
.post-card,
.side-card,
.kb-titlebox,
.kb-sidebox,
.empty-state,
.side-item,
.cat-individual a,
.social-media-iconss li{
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Buttons: keep them bold but softer */
button,
.cta-btn,
.searchbox button,
.button-design{
  background: var(--brand-yellow) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--text-main) !important;
}

/* Inputs */
input, textarea, select{
  border: 1px solid var(--border-soft) !important;
  background: #fff !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

/* Pills / chips */
.pill{
  border: 1px solid var(--border-soft) !important;
  box-shadow: none !important;
  background: #fff !important;
  color: var(--text-main) !important;
}
.pill-accent{
  background: var(--brand-yellow) !important;
}

/* Badges dots */
.kb-badge .dot{
  background: var(--brand-green) !important;
}

/* Decorative blobs: make them softer */
.circle-yellow, .circle-blue{
  opacity: 0.18 !important;
  filter: blur(50px) !important;
}

/* Headings: keep strong but not too harsh */
h1, h2, h3, h4{
  color: var(--text-main);
}

/* Optional: make black stroke text less aggressive */
.main-div h1{
  -webkit-text-stroke: 0px transparent !important;
}