/* ==========================================================================
   CrewConfirm — Design Tokens  ·  "Olive" app system
   Single source of truth for the CrewConfirm look. Values match the approved
   Olive HTML samples exactly (deep olive green + warm white, soft cards,
   Fraunces display + Inter body, calm status colors). Components reference
   only these variables — no hardcoded hex in _components.css.
   ========================================================================== */

:root {
  /* ---- Color: surfaces ------------------------------------------------ */
  --cc-bg:            #f5f7f5;   /* app background — warm green-white */
  --cc-surface:       #ffffff;  /* cards, sheets, panels */
  --cc-surface-sunk:  #eef1ee;  /* inset wells, segmented track, empty states */
  --cc-overlay:       rgba(21, 32, 26, 0.42);

  /* ---- Color: ink ----------------------------------------------------- */
  --cc-ink:           #15201a;  /* primary text — near-black green */
  --cc-ink-soft:      #46544d;  /* secondary text */
  --cc-ink-faint:     #7b8a82;  /* tertiary / meta text */

  /* ---- Color: lines --------------------------------------------------- */
  --cc-line:          #e4e9e4;  /* default hairline border */
  --cc-line-soft:     #eef1ed;  /* internal dividers (inside cards) */
  --cc-line-strong:   #d3dad3;
  --cc-line-hover:    #d9e0d9;  /* card hover border */
  --cc-stripe:        #f0f3f0;  /* open-slot hatch */

  /* ---- Color: brand (Olive green) ------------------------------------- */
  --cc-brand:         #1c5e45;  /* primary action — deep olive green */
  --cc-brand-strong:  #143f2f;  /* darker olive — hover / pressed / display ink */
  --cc-brand-soft:    #5aa383;  /* light olive — bars, dashed borders, accents */
  --cc-brand-ink:     #143f2f;  /* text-on-tint */
  --cc-brand-tint:    #e9f1ec;  /* brand pill / chip / avatar background */
  --cc-brand-line:    #d4e6db;  /* tinted-panel border (new-link panel) */
  --cc-on-brand:      #ffffff;  /* text/icons on brand-colored surfaces */

  /* ---- Color: status (pills & chips) ---------------------------------- */
  --cc-ok:            #1e7a4f;  --cc-ok-tint:   #e7f3ec;   /* confirmed / accepted */
  --cc-warn:          #a9760f;  --cc-warn-tint: #fbf1db;   /* waiting / expires-soon */
  --cc-risk:          #a4493f;  --cc-risk-tint: #f8eae8;   /* declined / released / late */
  --cc-neutral-ink:   #46544d;  --cc-neutral-tint: #eef1ee;/* draft / generic */

  /* ---- 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 --------------------------------------------------------- */
  --cc-radius-sm:   8px;
  --cc-radius-md:  12px;
  --cc-radius-lg:  16px;   /* cards */
  --cc-radius-xl:  20px;   /* portal card */
  --cc-radius-btn:  9px;   /* Olive buttons — softly-rounded, not full pills */
  --cc-radius-pill: 999px; /* pills, chips, avatars */

  /* ---- Shadow (light, calm) ------------------------------------------ */
  --cc-shadow-soft: 0 1px 2px rgba(21, 32, 26, 0.05);
  --cc-shadow-card: 0 1px 2px rgba(21, 32, 26, 0.05),
                    0 8px 22px rgba(21, 32, 26, 0.05);
  --cc-shadow-btn:  0 1px 2px rgba(21, 32, 26, 0.14);
  --cc-shadow-pop:  0 18px 44px rgba(21, 32, 26, 0.16);
  --cc-ring:        0 0 0 3px var(--cc-brand-tint);

  /* ---- Type ----------------------------------------------------------- */
  --cc-font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, "Helvetica Neue", Arial, sans-serif;
  --cc-font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --cc-text-xs:   12px;  --cc-text-sm:   13px;  --cc-text-base: 15px;
  --cc-text-lg:   17px;  --cc-text-xl:   21px;  --cc-text-2xl:  28px;

  --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;

  --cc-ease: cubic-bezier(.22, .61, .36, 1);

  /* ---- Layout --------------------------------------------------------- */
  --cc-app-max:      820px;  /* manager content column (wide-enough desktop) */
  --cc-app-max-wide: 1100px; /* board / wide list pages */
  --cc-portal-max:    460px; /* freelancer portal — narrow + focused */
  --cc-topbar-h:      58px;
  --cc-bottom-nav-h:  62px;
  --cc-tap-min:       44px;
}