/* ============================================================
   Alcashlabs Social Poster v2 — Design Tokens
   Buffer-inspired: light, generous whitespace, pill shapes,
   green primary, Inter type. 8px spacing scale.
   ============================================================ */
:root{
  /* ---- color ---- */
  --bg:#f4f5f4;
  --surface:#ffffff;
  --surface-2:#fafbfa;
  --surface-3:#f0f2f0;
  --border:#e5e8e5;
  --border-strong:#d4d9d4;
  --ink:#1a1f1a;
  --ink-2:#3d453d;
  --muted:#6f776f;
  --faint:#9aa39a;

  /* Buffer-like green family */
  --primary:#2c4b3f;
  --primary-hover:#233d33;
  --primary-soft:#e8f0ec;
  --primary-ink:#ffffff;
  --accent:#4caf7d;
  --accent-soft:#e6f6ec;

  --yt:#ff0033;            /* YouTube red — only for YT badges */
  --danger:#d92d20;
  --danger-soft:#fdecea;
  --warning:#b54708;
  --warning-soft:#fef3e2;
  --info:#175cd3;
  --info-soft:#eaf1fd;

  /* ---- spacing (8px base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* ---- radius ---- */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;

  /* ---- shadow ---- */
  --sh-sm:0 1px 2px rgba(16,24,16,.06);
  --sh-md:0 2px 8px rgba(16,24,16,.08);
  --sh-lg:0 8px 28px rgba(16,24,16,.14);
  --sh-modal:0 24px 70px rgba(16,24,16,.28);

  /* ---- type ---- */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px;
  --fs-xl:20px; --fs-2xl:24px;
  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700;
  --lh:1.5;

  /* ---- motion ---- */
  --t-fast:120ms; --t-base:180ms; --t-slow:280ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}