/* ===========================================================================
   TeamReach — Color tokens
   ---------------------------------------------------------------------------
   Two coexisting palettes:

   1. PRODUCT (source of truth: apps/mobile/src/lib/theme.ts). The shipping
      app is blue-led. Use these for any product / wireframe / app-screen work.
   2. BRAND / MARKETING (source: "TeamReach Color Palette - June 2026").
      The logo and marketing system are RED-led. Marketing may use the full
      expressive palette while staying recognizably TeamReach.

   Base values first, semantic aliases below. Prefer the semantic aliases in
   product work; reach for raw brand hues in marketing.
   =========================================================================== */

:root {
  /* ---- Brand / marketing palette (logo + collateral) -------------------- */
  --tr-red: #fe4040;          /* logo mark, marketing primary */
  --tr-red-ink: #e22f2f;      /* pressed / darker red */
  --tr-blue: #306db6;         /* marketing blue */
  --tr-navy: #00253d;         /* deep navy — dark sections, text on light */
  --tr-orange: #eba239;       /* accent / energy */
  --tr-green: #02ab1e;        /* accent / positive */
  --tr-gray: #585858;         /* neutral marketing gray */
  --tr-black: #000000;

  /* ---- Product brand blues (app source of truth) ------------------------ */
  --blue-primary: #005495;    /* colors.primary — primary product blue */
  --blue-primary-light: #036fbc; /* buttonPrimary — filled CTA */
  --blue-primary-dark: #004a7a;  /* pressed primary */
  --blue-accent: #2684dd;     /* links, interactive accents */
  --blue-sky: #4a90e2;        /* lighter interactive */
  --blue-dm-highlight: #007afe;

  /* ---- Product status colors -------------------------------------------- */
  --status-success: #009444;  /* RSVP going / game win */
  --status-error: #fb2b2d;    /* destructive / RSVP not-going */
  --status-warning: #ff9500;  /* delayed / RSVP maybe */
  --status-info: #2684dd;
  --status-postponed: #7f3f98;
  --status-cancelled: #ce3e26;

  /* RSVP-specific */
  --rsvp-going: #009444;
  --rsvp-not-going: #fb2b2d;
  --rsvp-maybe: #ff9500;

  /* Game result */
  --result-win: #009444;
  --result-loss: #bcbec0;
  --result-tie: #ff9500;

  /* ---- Feed accents ----------------------------------------------------- */
  --important-bg: #ffe699;    /* leader-flagged "important" message card */
  --important-ink: #ce3e26;
  --pending-bg: #fff4d9;      /* pending-approval tint */
  --pending-banner: #f8e5b0;
  --pending-ink: #8a5a00;
  --badge-red: #ff3333;       /* unread / count badge */
  --highlight: #e4eff6;       /* selected row / newest-comment highlight */

  /* ---- Neutrals & text -------------------------------------------------- */
  --white: #ffffff;
  --black: #000000;
  --ink: #212121;             /* textPrimary */
  --ink-2: #4d4d4d;           /* secondary text on light */
  --gray-700: #585858;
  --gray-600: #707070;        /* groupTextviewGray — meta/secondary */
  --gray-500: #808080;        /* tertiary */
  --gray-400: #8e8e93;        /* placeholder / muted (iOS gray) */
  --gray-300: #bdbdbd;
  --gray-200: #e0e0e0;        /* divider */
  --gray-150: #e5e7eb;        /* borderLight — soft borders */
  --gray-100: #f5f5f5;        /* soft surface / input fill */
  --gray-50:  #f8f8f8;        /* app background */

  /* ---- Surfaces & lines ------------------------------------------------- */
  --surface: #ffffff;         /* cards */
  --surface-sunken: #f5f5f5;  /* input fields, soft panels */
  --bg-app: #f8f8f8;          /* screen background */
  --border: #e0e0e0;          /* default divider */
  --border-soft: #e5e7eb;     /* subtle in-card border */
  --header-bg: #000000;       /* nav / status bar */

  /* ---- Semantic aliases (prefer these in product work) ------------------ */
  --color-primary: var(--blue-primary-light);
  --color-primary-ink: var(--white);
  --color-primary-pressed: var(--blue-primary-dark);
  --color-link: var(--blue-primary);
  --color-destructive: var(--status-error);

  --text-primary: var(--ink);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-400);
  --text-on-dark: var(--white);
  --text-link: var(--blue-primary);

  --surface-card: var(--surface);
  --surface-input: var(--surface-sunken);
  --divider: var(--border);

  /* Avatar fallback ramp (deterministic, from Avatar.tsx) */
  --avatar-1: #4a90d9;
  --avatar-2: #50c878;
  --avatar-3: #e8725c;
  --avatar-4: #9b59b6;
  --avatar-5: #f5a623;
  --avatar-6: #1abc9c;
  --avatar-7: #e74c3c;
  --avatar-8: #3498db;
}