/* ============================================================
   CRM Design System — Colors & Tokens
   ============================================================
   Canonical color palette for the entire CRM (yossishaked.net).
   All modules should use these variables.

   Philosophy:
   - ONE brand color (burgundy #95514f) — used for accents, icons,
     primary buttons, borders-on-hover.
   - Neutral grays for backgrounds and text.
   - Status colors (green/red/amber) ONLY for actual status signals
     (drone/reels yes-no, deadline past/soon, confirmed/rejected).
   - NO gradients on buttons or icon circles. Flat, professional.

   How to use from a module:
     <link rel="stylesheet" href="../shared/css/colors.css">
     .my-card { background: var(--card-bg); border: 1px solid var(--border-subtle); }
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --brand-primary:        #95514f;   /* Burgundy — the ONE brand color */
  --brand-primary-dark:   #7a3f3d;   /* Hover / active state of brand primary */
  --brand-primary-light:  #bd8e85;   /* Lighter tint — NOT for primary buttons */
  --brand-tint-bg:        #fdfaf9;   /* Very subtle warm background (card headers, hovers) */
  --brand-tint-border:    #ebdeda;   /* Subtle brand-tinted border for cards */
  --brand-tint-border-hover: #d7bfb8; /* Border on hover */
  --brand-tint-divider:   #f3e8e6;   /* Divider inside cards */

  /* ---- Surface / Background ---- */
  --bg-page:              #fafafa;   /* Main page background */
  --bg-card:              #ffffff;   /* Card backgrounds (default white) */
  --bg-subtle:            #f9fafb;   /* Empty states, subtle sections */
  --bg-muted:             #f3f4f6;   /* Muted chips, gray pills */

  /* ---- Text ---- */
  --text-primary:         #111827;   /* Main text */
  --text-secondary:       #1f2937;   /* Card titles */
  --text-muted:           #6b7280;   /* Labels, metadata */
  --text-subtle:          #9ca3af;   /* Placeholders, origin labels */

  /* ---- Borders ---- */
  --border-subtle:        #ebdeda;   /* Same as --brand-tint-border (card borders) */
  --border-neutral:       #e5e7eb;   /* Neutral gray border (inputs, dividers) */
  --border-light:         #f3e8e6;   /* Light divider */

  /* ---- Status: Green (positive / confirmed) ---- */
  --status-green:         #16a34a;
  --status-green-dark:    #15803d;
  --status-green-bg:      #d1fae5;
  --status-green-text:    #065f46;
  --status-green-border:  #6ee7b7;

  /* ---- Status: Red (negative / missing / past due) ---- */
  --status-red:           #dc2626;
  --status-red-dark:      #b91c1c;
  --status-red-bg:        #fee2e2;
  --status-red-text:      #991b1b;
  --status-red-border:    #fca5a5;

  /* ---- Status: Amber (maybe / pending / warning) ---- */
  --status-amber:         #f59e0b;
  --status-amber-dark:    #d97706;
  --status-amber-bg:      #fef3c7;
  --status-amber-text:    #92400e;
  --status-amber-border:  #fde68a;

  /* ---- Status: Gray (neutral / not-relevant) ---- */
  --status-gray-bg:       #f3f4f6;
  --status-gray-text:     #4b5563;
  --status-gray-border:   #d1d5db;

  /* ---- Info accents (for source labels — couple / photographer) ---- */
  --accent-blue:          #3b82f6;   /* "From the couple" source pill */
  --accent-blue-bg:       #f3f8fd;
  --accent-blue-border:   #dbeafe;

  --accent-orange:        #ea580c;   /* "From the photographer" source pill */
  --accent-orange-bg:     #fff7ed;
  --accent-orange-border: #fed7aa;

  /* ---- Shape & Motion ---- */
  --radius-sm:            6px;
  --radius-md:            8px;
  --radius-lg:            10px;
  --radius-pill:          999px;

  --transition-fast:      0.15s ease;
  --transition-normal:    0.2s ease;

  /* ---- Typography scale (hints — not enforced) ---- */
  --font-label:           11px;  /* uppercase small labels */
  --font-meta:            12px;  /* captions, metadata */
  --font-body:            14px;  /* main body text */
  --font-title:           15px;  /* card titles */
  --font-section:         16px;  /* section titles */
}

/* ============================================================
   Utility classes (optional — use raw vars if you prefer)
   ============================================================ */

/* Unified card pattern — drop-in class for consistent cards */
.crm-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.crm-card:hover {
  border-color: var(--brand-tint-border-hover);
}

.crm-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--brand-tint-bg);
  border-bottom: 1px solid var(--brand-tint-divider);
  font-size: var(--font-title);
  font-weight: 700;
  color: var(--text-secondary);
}
.crm-card-header svg,
.crm-card-header .crm-card-icon {
  color: var(--brand-primary);
}
.crm-card-body {
  padding: 14px 16px;
}

/* Primary solid button (burgundy) */
.crm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.crm-btn-primary:hover:not(:disabled) {
  background: var(--brand-primary-dark);
}
.crm-btn-primary:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Secondary outlined button (burgundy outline) */
.crm-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  background: var(--bg-card);
  color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.crm-btn-outline:hover:not(:disabled) {
  background: var(--brand-tint-bg);
  color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
.crm-btn-outline:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Info item (icon + label + value) — for key/value displays */
.crm-info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}
.crm-info-item:hover {
  border-color: var(--brand-tint-border-hover);
}
.crm-info-item-icon {
  flex-shrink: 0;
  color: var(--brand-primary);
  opacity: 0.85;
  padding-top: 2px;
}
.crm-info-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.crm-info-item-label {
  font-size: var(--font-label);
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.crm-info-item-value {
  font-size: var(--font-body);
  color: var(--text-primary);
  font-weight: 500;
  word-break: break-word;
  line-height: 1.45;
}

/* Status pills — flat & subtle, only for real status signals */
.crm-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--font-meta);
  font-weight: 600;
  line-height: 1.4;
}
.crm-pill-green {
  background: var(--status-green-bg);
  color: var(--status-green-text);
}
.crm-pill-red {
  background: var(--status-red-bg);
  color: var(--status-red-text);
}
.crm-pill-amber {
  background: var(--status-amber-bg);
  color: var(--status-amber-text);
}
.crm-pill-gray {
  background: var(--status-gray-bg);
  color: var(--status-gray-text);
}