/* ============================================================
   Data Tower — Design Tokens (CSS)
   Single source of truth · v1.0.0
   Reference: Leads (#leads) dark v2-* system
   Scope: Leads, Estimates, Jobs, Calls, Unknown leads, HCP
   NOT for: /admin, /settings, /logs (separate light system)
   ============================================================ */

/* ---- Brand + theme-agnostic ---- */
:root {
  --color-accent:        #FFC107;
  --color-accent-ink:    #111111;   /* text/icon ON yellow — never near-white */
  --color-thumbtack:     #1A6BFF;   /* "selected/active" system color */

  /* Status palette — one set for lead AND estimate statuses */
  --status-danger-bg:  rgba(239,68,68,0.14);  --status-danger-fg:  #F49B9B;
  --status-success-bg: rgba(34,197,94,0.14);  --status-success-fg: #6EE7A8;
  --status-info-bg:    rgba(59,130,246,0.14); --status-info-fg:    #8AB4F8;
  --status-purple-bg:  rgba(139,92,246,0.16); --status-purple-fg:  #C4B1F7;
  --status-warning-bg: rgba(245,158,11,0.14); --status-warning-fg: #F5C878;

  /* Extension lead card reuses these existing tokens (landed from the Claude
     Design эталон, Phase 16.212/213): HCP customer/job links = --status-info-fg;
     phone-row icon = --status-success-{fg,bg}; "В работе"/selected option =
     --color-thumbtack (+ --selected-bg / --focus-select). Card panel =
     --color-card on --card-body. Button warn/danger border alpha canon = .30
     (the sample used .35; we keep .30 for consistency with the other borders). */

  /* Radius */
  --radius-sm: 4px;   /* workhorse: inputs, small controls */
  --radius-md: 8px;   /* buttons, textarea */
  --radius-card: 10px;
  --radius-block: 12px;
  --radius-chip: 16px;
  --radius-pill: 999px;

  /* Spacing — 4px grid */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* Sizing */
  --control-h: 36px;        /* target; migrate gradually */
  --sidebar-w: 320px;
  --content-max: 1680px;    /* validated: .v2 / .app-header__inner — breathing room for header/chips/widgets without losing density */
  --card-w: clamp(320px, 21vw, 430px);   /* extension lead card — fluid (Claude Design эталон 16.212/213) */

  /* Motion */
  --motion-base: 0.15s cubic-bezier(0.4,0,0.2,1);
  --motion-fast: 0.08s ease;

  /* Shadows */
  --shadow-card:  0 1px 0 rgba(16,24,39,0.04), 0 10px 34px rgba(16,24,39,0.06);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.45);
  --focus-accent: 0 0 0 2px rgba(255,193,7,0.55);
  --focus-select: 0 0 0 1px rgba(26,107,255,0.45);

  /* ---- LIGHT theme surfaces (base :root) ---- */
  --color-bg:            #FFFFFF;
  --color-card:          #FFFFFF;
  --color-card-hover:    #F9FAFB;
  --color-block-subtle:  #F3F4F6;
  --color-border:        #E5E7EB;
  --color-border-strong: #D1D5DB;
  --color-text-primary:  #111827;
  --color-text-secondary:#4B5563;
  --color-text-muted:    #6B7280;

  /* extension lead card — landed from Claude Design эталон (16.212/213) */
  --card-body:     #EEF0F3;   /* darkened plane behind the 4 card panels (light) */
  --timeline-text: #1F2937;   /* card History row title (light) */

  /* selected fill — light */
  --selected-bg:     #0F1A2A;
  --selected-fg:     #FFFFFF;
  --selected-ring:   var(--focus-select);
}

/* ---- DARK theme (canonical / reference) ---- */
:root[data-theme="dark"] {
  --color-bg:            #0F1115;
  --color-card:          #1A1D24;
  --color-card-hover:    #20242C;
  --color-block-subtle:  #252932;
  --color-border:        #2F3540;
  --color-border-strong: #404756;
  --color-text-primary:  #F3F4F6;
  --color-text-secondary:#9CA3AF;
  --color-text-muted:    #6B7280;

  /* extension lead card — landed from Claude Design эталон (16.212/213) */
  --card-body:     #131519;   /* darkened plane behind the 4 card panels (dark, canon) */
  --timeline-text: #E5E7EB;   /* card History row title (dark) */

  /* selected fill — dark (muted thumbtack); rgba fallback for no color-mix */
  --selected-bg:   rgba(26,107,255,0.18);
  --selected-bg:   color-mix(in srgb, var(--color-thumbtack) 22%, var(--color-card));
  --selected-fg:   #FFFFFF;
  --selected-ring: var(--focus-select);
}

/* ============================================================
   LIGHT-theme status-pill contrast (Phase 17.2, from the HCP-card design
   update). The base :root status --*-fg values are tuned for dark surfaces
   (light hues on a tint); on a white surface they need darker text for AA at
   11–12px. Surface tokens (bg/card/border/text) are already the light :root
   defaults — only the status pills override here.
   ============================================================ */
[data-theme="light"] {
  --status-danger-bg:  rgba(220,38,38,0.12);  --status-danger-fg:  #B91C1C;
  --status-success-bg: rgba(22,163,74,0.13);  --status-success-fg: #166534;
  --status-info-bg:    rgba(37,99,235,0.11);  --status-info-fg:    #1D4ED8;
  --status-purple-bg:  rgba(139,92,246,0.13); --status-purple-fg:  #6D28D9;
  --status-warning-bg: rgba(245,158,11,0.16); --status-warning-fg: #92400E;
}

/* ============================================================
   Status pill — single component for every status concept.
   Apply .dt-status + a modifier; rectangles (est-status 4px) and
   pills (v2-lead-status 999px) collapse into this one shape.
   ============================================================ */
.dt-status {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; line-height: 1.4;
  white-space: nowrap;
}
.dt-status--danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.dt-status--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.dt-status--info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
.dt-status--purple  { background: var(--status-purple-bg);  color: var(--status-purple-fg); }
.dt-status--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
/* Нейтральный чип: состояние без тревоги и без победы — «Работа отменена»,
   «истёк». Красить их в danger нельзя: это не потеря, а факт. */
.dt-status--muted   { background: var(--color-block-subtle); color: var(--color-text-secondary);
                      box-shadow: inset 0 0 0 1px var(--color-border); }