/* ============================================================
   SalonFlow — Colors
   Source of truth: apps/ipad/Salonflow/Shared/Theme.swift +
   Core/Models/Statuses.swift (status colors) + iOS system palette.
   The whole app keys off ONE hue: brand rose → violet (the S+flow mark).
   ============================================================ */

:root {
  /* ---- Brand (the salon rose → violet scheme, from the S+flow logo) ---- */
  --brand-rose:        #E81E76; /* primary accent — buttons, links, selection, visit numbers */
  --brand-rose-dark:   #C2185F; /* pressed / deeper rose */
  --brand-violet:      #7F32E7; /* gradient companion / glows */
  --brand-pink-light:  #FF5FA2; /* lighter pink — dark surfaces / secondary accent */
  /* Diagonal brand gradient — matches the logo exactly (vivid rose → blue-violet) */
  --brand-gradient:    linear-gradient(135deg, #FC3B7B 0%, #7F32E7 100%); /* @kind color */
  /* Soft tint wash used behind brand chips / info banners (≈ 10–14% brand) */
  --brand-tint:        rgba(232, 30, 118, 0.10);
  --brand-tint-strong: rgba(232, 30, 118, 0.14);
  --brand-glow:        rgba(127, 50, 231, 0.42); /* violet glow under logo / gradient hero */

  /* ---- iOS system status colors (used verbatim across the app) ---- */
  --sys-orange:  #FF9500; /* waiting / pending / busy */
  --sys-blue:    #007AFF; /* active / called */
  --sys-green:   #34C759; /* completed / available / paid */
  --sys-red:     #FF3B30; /* cancelled / no-show / offline */
  --sys-purple:  #AF52DE; /* in-progress / external POS */
  --sys-yellow:  #FFCC00; /* delayed */
  --sys-indigo:  #5856D6; /* package */
  --sys-gray:    #8E8E93; /* skipped / on-break / pay-later */
  --sys-pink:    #FF2D55; /* live-display accent */

  /* ---- iOS neutral surfaces (light appearance) ---- */
  --bg-grouped:        #F2F2F7; /* app page background (systemGroupedBackground) */
  --bg-base:           #FFFFFF; /* systemBackground — list/feature cards */
  --surface-card:      #FFFFFF; /* secondarySystemGroupedBackground — .salonCard() */
  --surface-field:     #FFFFFF; /* text-field fill (secondarySystemGroupedBackground) */
  --fill-system:       rgba(120, 120, 128, 0.20); /* systemFill — disabled / track */
  --fill-secondary:    rgba(120, 120, 128, 0.16);
  --fill-tertiary:     rgba(118, 118, 128, 0.12);

  /* ---- Labels (light appearance) ---- */
  --label-primary:    rgba(0, 0, 0, 0.90);
  --label-secondary:  rgba(60, 60, 67, 0.60);
  --label-tertiary:   rgba(60, 60, 67, 0.30);
  --label-quaternary: rgba(60, 60, 67, 0.18);
  --hairline:         rgba(0, 0, 0, 0.04); /* card stroke — Color.primary.opacity(0.04) */
  --separator:        rgba(60, 60, 67, 0.18);

  /* ---- Live display (dark TV screen) ---- */
  --display-bg:       #0A0A12; /* rgb(0.04,0.04,0.07) */
  --display-fg:       rgba(255, 255, 255, 0.92);
  --display-dim:      rgba(255, 255, 255, 0.40);
  --display-faint:    rgba(255, 255, 255, 0.06);

  /* ============================================================
     Semantic aliases — prefer these in components / kits
     ============================================================ */
  --accent:           var(--brand-rose);
  --accent-on:        #FFFFFF;
  --text-body:        var(--label-primary);
  --text-muted:       var(--label-secondary);
  --text-faint:       var(--label-tertiary);
  --link:             var(--brand-rose);

  /* Status → semantic (visit / task / payment / staff) */
  --status-waiting:     var(--sys-orange);
  --status-active:      var(--sys-blue);
  --status-called:      var(--sys-blue);
  --status-inprogress:  var(--sys-purple);
  --status-completed:   var(--sys-green);
  --status-cancelled:   var(--sys-red);
  --status-delayed:     var(--sys-yellow);
  --status-noshow:      var(--sys-red);
  --pay-paid:           var(--sys-green);
  --pay-pending:        var(--sys-orange);
  --pay-pos:            var(--sys-purple);
  --pay-package:        var(--sys-indigo);
  --pay-later:          var(--sys-gray);
  --staff-available:    var(--sys-green);
  --staff-busy:         var(--sys-orange);
  --staff-break:        var(--sys-gray);
  --staff-offline:      var(--sys-red);
}