/* ============================================================
   Sociala Widget — Color tokens
   Source of truth: draft.fig (Brand Colors collection + usage)
   Brand: electric lime accent on near-black "dark green" ink,
   over a soft greyish-lime-green surface.
   ============================================================ */

:root {
  /* ---- Brand primitives ---------------------------------- */
  --lime-300: #ccff00;          /* electric lime — the signature accent      */
  --lime-400: #aadd28;          /* lime pressed / darker variant             */
  --lime-100: rgba(204, 255, 0, 0.32);
  --lime-200: rgba(204, 255, 0, 0.64);

  --green-ink: #022602;         /* "dark green" — primary text & buttons      */
  --green-ink-2: #060913;       /* near-black ink used on dense chrome        */
  --green-600: #1c8548;         /* success / verified green                   */
  --green-300: #cce4cc;         /* mint — selected segment, soft fills        */
  --green-100: #e4efe4;         /* faint mint tint                            */

  --surface-mint: #f1f6f1;      /* app background — greyish lime green         */
  --surface-mint-2: #ecf3ec;    /* slightly deeper mint panel                 */
  --white: #ffffff;

  /* ---- Neutral / mountain-grey scale --------------------- */
  --grey-25: #f0f3f5;
  --grey-50: #e2e6ed;
  --grey-100: #c8ced9;
  --grey-200: #afb7c4;
  --grey-300: #98a0b0;
  --grey-400: #77849d;
  --grey-500: #6e788a;
  --grey-600: #3c475d;
  --grey-700: #323c4e;
  --grey-800: #28303f;
  --grey-900: #202632;
  --grey-1000: #191c22;

  /* ---- Semantic accents ---------------------------------- */
  --accent-pink: #ff007a;       /* notification dots / "new" markers          */
  --accent-orange: #f3a118;     /* warnings, "remaining" pills                */
  --accent-yellow: #efcc14;     /* pending state                              */
  --accent-red: #ca3b4c;        /* required / error                           */
  --accent-blue: #0072c6;       /* informational links                        */

  /* ---- Semantic aliases (use these in components) -------- */
  --bg-app: var(--surface-mint);
  --bg-surface: var(--white);
  --bg-surface-sunken: var(--surface-mint);
  --bg-inverse: var(--green-ink);

  --text-primary: var(--green-ink);
  --text-secondary: rgba(6, 9, 19, 0.52);
  --text-tertiary: rgba(6, 9, 19, 0.36);
  --text-on-dark: var(--white);
  --text-on-accent: var(--green-ink);
  --text-accent: var(--green-600);
  --text-disabled: rgba(6, 9, 19, 0.28);

  --fill-accent: var(--lime-300);
  --fill-accent-press: var(--lime-400);
  --fill-primary: var(--green-ink);
  --fill-secondary: var(--green-300);
  --fill-tinted: var(--surface-mint);

  --border-subtle: rgba(6, 9, 19, 0.08);
  --border-default: var(--grey-50);
  --border-strong: rgba(6, 9, 19, 0.16);
  --border-focus: var(--green-ink);

  /* ---- Status ------------------------------------------- */
  --status-success-fill: rgba(26, 148, 130, 0.32);
  --status-success-text: var(--green-ink);
  --status-pending-fill: rgba(239, 204, 20, 0.5);
  --status-pending-text: var(--green-ink);
  --status-required-fill: var(--accent-red);
  --status-required-text: var(--white);
}