/* AI All Social Generator — shared design tokens
   Professional structure + social-media energy. Used by app/ AND marketing/. */
:root{
  /* brand gradient (hero/CTA/active states) */
  --brand:        #6D5EF7;   /* electric indigo */
  --brand-2:      #FF5E9C;   /* pink */
  --brand-3:      #FF8A3D;   /* coral */
  --brand-grad:   linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  --brand-grad-soft: linear-gradient(120deg, #efedff 0%, #ffeaf3 55%, #fff0e4 100%);

  /* surfaces */
  --bg:        #FBFAFF;
  --bg-tint:   #F4F1FE;
  --card:      #FFFFFF;
  --ink:       #15131F;
  --ink-soft:  #585369;
  --line:      #ECE9F5;
  --line-2:    #DAD5EC;

  /* state */
  --ok:#12A150; --warn:#C77700; --danger:#D7263D;
  --focus: 0 0 0 3px rgba(109,94,247,.35);

  /* type */
  --font-display: "Hanken Grotesk", "Newsreader", Georgia, serif;
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* shape */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow-sm: 0 1px 2px rgba(21,19,31,.06), 0 1px 3px rgba(21,19,31,.05);
  --shadow:    0 6px 24px rgba(21,19,31,.08);
  --shadow-lg: 0 18px 50px rgba(109,94,247,.18);

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --maxw: 1140px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#100E18; --bg-tint:#171327; --card:#1A1626; --ink:#F4F2FB; --ink-soft:#A9A3BE;
    --line:#272233; --line-2:#352D49; --brand-grad-soft: linear-gradient(120deg,#241f3d,#2c2036,#2e2417);
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;line-height:1.55}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.1;margin:0 0 .4em}
a{color:var(--brand)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-weight:650;
  font-size:15px;padding:12px 20px;border-radius:var(--r-pill);background:var(--brand-grad);
  color:#fff;box-shadow:var(--shadow);transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:5px 11px;border-radius:var(--r-pill);background:var(--bg-tint);border:1px solid var(--line)}
.grad-text{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:none;box-shadow:var(--focus)}