/* ==========================================================================
   CrewConfirm — Design Tokens
   Single source of truth for the CrewConfirm look.
   Direction: white, crisp, airy, friendly, mobile-first, pill-heavy,
   rounded cards, light borders, minimal information per screen,
   premium but not enterprise-heavy.

   Every color, space, radius, and type value used in the product comes
   from a variable here. Components never hardcode hex values.
   ========================================================================== */

:root {
  /* ---- Color: surfaces ------------------------------------------------ */
  --cc-bg:            #fbfcfe;   /* app background — barely-there cool white */
  --cc-surface:       #ffffff;  /* cards, sheets */
  --cc-surface-sunk:  #f4f6fa;  /* inset wells, empty states */
  --cc-overlay:       rgba(23, 31, 51, 0.42);

  /* ---- Color: ink ----------------------------------------------------- */
  --cc-ink:           #171f33;  /* primary text */
  --cc-ink-soft:      #515b73;  /* secondary text */
  --cc-ink-faint:     #8a93a8;  /* tertiary / meta text */

  /* ---- Color: lines --------------------------------------------------- */
  --cc-line:          #e7ebf2;  /* default hairline border */
  --cc-line-strong:   #d4dae6;

  /* ---- Color: brand --------------------------------------------------- */
  --cc-brand:         #3b6ef6;  /* primary action — calm confident blue */
  --cc-brand-ink:     #1d49c4;  /* pressed / text-on-tint */
  --cc-brand-tint:    #eaf0ff;  /* brand pill / chip background */
  --cc-on-brand:      #ffffff;  /* text/icons on brand-colored surfaces */

  /* ---- Color: status (used by pills & chips) -------------------------- */
  --cc-ok:            #1f9d6b;  /* confirmed / filled / accepted */
  --cc-ok-tint:       #e4f6ee;
  --cc-warn:          #c98a18;  /* waiting / pending / reconfirm-due */
  --cc-warn-tint:     #fbf1dc;
  --cc-risk:          #d8503c;  /* at-risk / declined / failed / open-late */
  --cc-risk-tint:     #fceae6;
  --cc-neutral-ink:   #515b73;  /* draft / archived / generic */
  --cc-neutral-tint:  #eef1f6;

  /* ---- Spacing scale (4px base) -------------------------------------- */
  --cc-space-1:  4px;
  --cc-space-2:  8px;
  --cc-space-3: 12px;
  --cc-space-4: 16px;
  --cc-space-5: 20px;
  --cc-space-6: 24px;
  --cc-space-8: 32px;
  --cc-space-10: 40px;

  /* ---- Radius (rounded, soft) ---------------------------------------- */
  --cc-radius-sm:   8px;
  --cc-radius-md:  12px;
  --cc-radius-lg:  16px;   /* cards */
  --cc-radius-xl:  22px;
  --cc-radius-pill: 999px; /* pills, chips, primary buttons */

  /* ---- Shadow (light, airy — never heavy) ---------------------------- */
  --cc-shadow-card: 0 1px 2px rgba(23, 31, 51, 0.04),
                    0 6px 18px rgba(23, 31, 51, 0.05);
  --cc-shadow-pop:  0 8px 30px rgba(23, 31, 51, 0.12);

  /* ---- Type ----------------------------------------------------------- */
  --cc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --cc-text-xs:   12px;
  --cc-text-sm:   13px;
  --cc-text-base: 15px;   /* mobile body default */
  --cc-text-lg:   17px;
  --cc-text-xl:   20px;
  --cc-text-2xl:  26px;

  --cc-weight-regular: 400;
  --cc-weight-medium:  500;
  --cc-weight-semi:    600;
  --cc-weight-bold:    700;

  --cc-leading-tight: 1.25;
  --cc-leading-body:  1.5;

  /* ---- Layout --------------------------------------------------------- */
  --cc-app-max:     480px;  /* mobile-first column width */
  --cc-bottom-nav-h: 64px;
  --cc-tap-min:     44px;   /* minimum touch target */
}

/* Note: a future v2 dark-mode block would override these under
   @media (prefers-color-scheme: dark). Out of scope for Ticket 1. */