/* ═══════════════════════════════════════════════════════════
   CITYSTAY Design System — shared colour tokens
   Loaded FIRST on every app entry point (Dashboard, Owner, Nip,
   Citytax) so all app-specific CSS can resolve var(--cs-*).
   Raw palette only — no component logic, no Bootstrap overrides,
   no --mf-* aliases (those stay app/component-local).
   See docs/process/design/2026-07-09-frontend-colours-css-vars-design.md
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --cs-primary:            #ffae00;  /* the ONE brand orange (Change 3) */
  --cs-primary-dark:       #cc8c00;
  --cs-primary-light:      rgba(255, 174, 0, 0.12);
  --cs-primary-shadow-ring: rgba(255, 174, 0, 0.2);  /* mirrors --cs-primary's RGB; used by custom.css form-control focus ring */
  --cs-link-hover:         #a07000;

  /* Neutral surfaces / borders — kept as DISTINCT tokens even where two
     values are visually close, because they are not byte-identical in the
     source; merging them would be a (tiny) visual change, which Phase A
     does not do except for the orange. Same rule for text/border below. */
  --cs-surface-1:  #f9f9f9;  /* owners/edit.php x3; reviews detail.php box */
  --cs-surface-2:  #f7f7f7;  /* login glass-container (both login.css and owner/custom.css — literal dup, real merge) */
  --cs-surface-3:  #f0f0f0;  /* custom.css form-control:focus bg */
  --cs-surface-4:  #f8f9fa;  /* custom.css tr.has-tooltip:hover */
  --cs-surface-5:  #e4e4e4;  /* custom.css tooltip-inner bg */
  --cs-surface-6:  #f9fff9;  /* reviews detail.php box background */
  --cs-surface-8:  #e6e6e6;  /* custom.css --cs-input-bg */
  --cs-surface-white: #ffffff;

  --cs-border-1:   #e8e8e8;  /* owners/edit.php, paired with --cs-surface-1 */
  --cs-border-2:   #ccc;     /* custom.css tooltip border; jumbotron .steps text */
  --cs-border-3:   #dee2e6;  /* bookingCalendar grid lines */
  --cs-border-4:   #c3e6cb;  /* reviews detail/search green-tinted border, all 4 files */

  --cs-text-muted-1: #555;   /* custom.css sidebar text; Nip body text */
  --cs-text-muted-2: #666;   /* map.php popup subtitle; reviews detail.php */
  --cs-text-muted-3: #777;   /* jumbotron footer text */
  --cs-text-muted-4: #404040; /* bookingCalendar row label text */
  --cs-text-muted-5: #888;   /* bookingCalendar header-row label text */
  --cs-text-muted-6: #999;   /* bookingCalendar day-number text */
  --cs-text-muted-7: #bbb;   /* bookingCalendar weekend day-number text */
  --cs-text-dark-1:  #111;   /* custom.css tooltip text */
  --cs-black:        #000;   /* on-brand button/badge text, jumbotron active step */

  --cs-bg-page:    #f4f6f9;  /* == existing --mf-bg; also Nip body bg (literal dup, real merge) */

  /* Login-page background gradient — literal duplicate today between
     login.css:15 and owner/css/custom.css:24; one token, real merge. */
  --cs-gradient-neutral-start: #fff;
  --cs-gradient-neutral-end:   #d0d4d9;

  /* Status palette — owners/unit-contracts.php */
  --cs-status-active-bg:        #eaf4eb;
  --cs-status-active-badge-bg:  #c8e6c9;
  --cs-status-active-badge-fg:  #2e6b31;
  --cs-status-expiring-bg:       #fdf5dc;
  --cs-status-expiring-badge-bg: #fce8a0;
  --cs-status-expiring-badge-fg: #7a5c00;
  --cs-status-expired-bg:        #fae8e8;
  --cs-status-expired-badge-bg:  #f5c6c6;
  --cs-status-expired-badge-fg:  #8b1a1a;
  --cs-status-upcoming-bg:        #fdf0f0;
  --cs-status-upcoming-badge-bg:  #fad9d9;
  --cs-status-upcoming-badge-fg:  #9b3a3a;
  --cs-status-no-contract-bg:       #e6f3f8;
  --cs-status-no-contract-badge-bg: #b8dff0;
  --cs-status-no-contract-badge-fg: #1a5270;

  /* Chart semantics (purpose-named; decoupled from contract-status badge colours — DASHBOARD-B). */
  --cs-chart-good: #2e6b31;
  --cs-chart-bad:  #8b1a1a;
  --cs-chart-info: #1a5270;

  /* One-off accents (payment-models.php) */
  --cs-accent-purple:       #6f42c1;
  --cs-accent-green-subtle: #d1e7dd;
  --cs-accent-green-header: #97c665;  /* reviews search.php header */

  /* bookingCalendar defaults */
  --cs-calendar-default-event: #4a7fc1;
  --cs-calendar-weekend-bg:    #f8f8f8;
  --cs-calendar-today-bg:      #fffde7;
  --cs-calendar-today-fg:      #c00000;

  /* UI affordance overlays — dashboard/css/custom.css MOBILE-AUDIT right-edge
     scroll-fade (`.table-responsive.is-scrollable::after` / `.dt-scroll-body
     .is-scrollable::after`), gated on actual overflow by scroll-fade-toggle.js. */
  --cs-scroll-fade: rgba(0, 0, 0, .16);
}