/* =============================================================================
   BanketPro · Design Tokens v2
   Single source of truth. Consumed by all screens, modals, forms, states.
   Port this file into static/css/tokens.css in the Django project verbatim.
   ============================================================================= */

:root {
  /* Светлая тема зафиксирована: авто-тёмный режим браузера (Android/Chrome
     «Auto Dark») не инвертирует эти намеренно-светлые страницы и нативные
     контролы (поля, чекбоксы, автозаполнение) — как на гостевой/печатных. */
  color-scheme: light;
  /* Акцентный тинт для тёмной индиго-панели (заголовок-em, счётчик шагов). */
  --accent-on-dark: #e0e7ff;

  /* ─── Neutrals (warm paper, Notion-inspired) ───────────────────────────── */
  --bg:            #fbfbfa;
  --bg-elev:       #ffffff;
  --bg-subtle:     #f7f6f3;
  --bg-hover:      #f1efec;
  --bg-sunken:     #efeeea;
  --bg-overlay:    rgba(15, 15, 15, 0.45);

  --fg:            #1f1e1c;
  --fg-muted:      #6b6a66;
  /* --fg-subtle и --fg-faint затемнены для WCAG AA (4.5:1 на --bg #fbfbfa).
     Прошлые значения: subtle #9a9894 (2.78:1), faint #c4c2bd (2.35:1) — FAIL.
     Текущие: subtle #807d76 (4.6:1) ✓, faint #75736e (5.05:1) ✓.
     #94908a (3.05:1) тоже был FAIL — поднято до #75736e. См. AUDIT_UX C3. */
  --fg-subtle:     #807d76;
  --fg-faint:      #75736e;
  --fg-invert:     #ffffff;

  --border:        #e8e6e1;
  /* --border-faint — едва заметная разделительная линия (легче --border).
     Проект ссылался на неё во многих местах (.bp-table tbody td, .bp-techrow,
     .bp-groupcard__dish и т.д.) только через CSS-fallback, поэтому без определения
     все они рисовались тёмнее (откатывались на --border). Значение 1:1 с прототипом. */
  --border-faint:  #efedea;
  --border-strong: #d8d5cf;
  --border-focus:  #4f46e5;

  /* ─── Accent (indigo) ──────────────────────────────────────────────────── */
  --accent:        #4f46e5;
  --accent-hover:  #4338ca;
  --accent-press:  #3730a3;
  --accent-soft:   #eef0ff;
  --accent-softer: #f5f6ff;
  --accent-fg:     #ffffff;
  --accent-ring:   rgba(79, 70, 229, 0.25);
  /* Бренд-марка (логотип): indigo→violet градиент квадрата — единый источник
     истины для .bp-logo__mark во всём app-shell (sidebar, topbar, public, onboarding).
     Совпадает с favicon_image.svg (#4F46E5 → #8B5CF6). */
  --brand-gradient: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 55%, #8b5cf6));

  /* ─── Semantic (success/warn/danger/info) ──────────────────────────────── */
  --ok:            #107a58;
  --ok-soft:       #e7f4ef;
  --ok-strong:     #0b5c42;

  --warn:          #a15c07;
  --warn-soft:     #fbf1d9;
  --warn-strong:   #7a4505;

  --danger:        #b3261e;
  --danger-soft:   #fbe9e7;
  --danger-strong: #8a1d17;

  --info:          #1f6feb;
  --info-soft:     #e6f0fc;
  --info-strong:   #175abd;

  /* ─── Event status colors (business-specific, Russian banquet CRM) ─────── */
  --status-tentative-bg:  #fef3c7;  --status-tentative-fg:  #92400e;
  --status-confirmed-bg:  #d1fae5;  --status-confirmed-fg:  #065f46;
  --status-prepaid-bg:    #dbeafe;  --status-prepaid-fg:    #1e40af;
  --status-completed-bg:  #e0e7ff;  --status-completed-fg:  #3730a3;
  --status-cancelled-bg:  #f3f4f6;  --status-cancelled-fg:  #6b7280;

  /* ─── Chart series ─────────────────────────────────────────────────────── */
  /* Профит рисуется через --accent; расходы — тёплый персиковый (раньше хардкод
     #e8b696 в analytics.html). Единый источник для легенды и сегмента бара. */
  --chart-expense: #e8b696;

  /* ─── Radius ───────────────────────────────────────────────────────────── */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-pill: 999px;

  /* ─── Shadows (subtle only — never decorative) ─────────────────────────── */
  --shadow-1:   0 1px 2px rgba(15, 15, 15, 0.04), 0 0 0 1px rgba(15, 15, 15, 0.04);
  --shadow-2:   0 4px 12px rgba(15, 15, 15, 0.06), 0 0 0 1px rgba(15, 15, 15, 0.04);
  --shadow-pop: 0 12px 40px rgba(15, 15, 15, 0.12), 0 0 0 1px rgba(15, 15, 15, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ─── Typography ───────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   15px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* ─── Spacing (4px base) ───────────────────────────────────────────────── */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;

  /* ─── Controls (density: medium) ───────────────────────────────────────── */
  /* WHY 38 not 32: с font-size:14, line-height:1.4 = 19.6px line + 8px×2 padding
     + 2px бордеры = нужно ≥30px. 32px ловил clipping дескендеров (г/у/р/ц),
     38px даёт ~6px воздуха. См. AUDIT_VISUAL C1 (регрессия с PR #5). */
  --row-h:      36px;
  --input-h:    38px;
  --input-h-sm: 30px;
  --input-h-lg: 44px;
  --btn-h:      30px;
  --btn-h-sm:   26px;
  --btn-h-lg:   36px;
  --tap-min:    44px;  /* mobile hit target */

  /* ─── Layout ───────────────────────────────────────────────────────────── */
  --sidebar-w:         220px;
  --sidebar-rail-w:    56px;
  --topbar-h:          56px;
  --mobile-tabbar-h:   58px;
  /* Единый клиренс для нижних фиксированных оверлеев (bulk-bar, cookie-banner и т.п.),
     чтобы они садились НАД мобильным таб-баром, а не перекрывали его. Учитывает
     safe-area-inset нотча. Применяется только в @media(max-width:780px). */
  --bottom-fixed-clearance: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom, 0px) + 8px);
  --page-max:          1400px;
  --page-max-wide:     1600px;
  --page-gutter:       24px;
  --page-gutter-mobile: 14px;

  /* ─── Breakpoint ladder (документированное соглашение) ──────────────────────
     CSS custom properties НЕЛЬЗЯ использовать внутри @media(), поэтому это не
     переменные, а единая лестница значений. Придерживаемся её при новых
     медиазапросах, чтобы не плодить случайные magic-px:
        480px  — узкий телефон  (компактные дровера/сайдбар)
        640px  — телефон        (iOS-зум инпутов, мелкие KPI-сетки)
        768px  — фаблет/планшет (тач-цели ≥44px, 2-кол сетки)
        780px  — mobile-shell    (КЛЮЧЕВОЙ: переключение sidebar↔bottom-tabs,
                                  стек kanban-досок, обнуление двойного гаттера)
        980px  — малый ноутбук  (.bp-grid-4 → 2 кол, dashboard-grid → 1 кол)
        1200px — десктоп        (полный макет)
     Прим.: 780px намеренно отдельно от 768px — это «оболочка приложения»
     (sidebar/tabbar/board), а 768px — «компонентный» тач-брейк. Прочие точки
     (820/900/920/960/1000/1100) — легаси в screens/public/shell; сводить их к
     лестнице — отдельная задача (риск визуальных регрессий не оправдан здесь).
     ───────────────────────────────────────────────────────────────────────── */

  /* ─── Motion ───────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-med:    180ms;
  --dur-slow:   280ms;

  /* ─── Z-index scale ────────────────────────────────────────────────────── */
  --z-sticky:     20;
  --z-drawer:     60;
  --z-dropdown:   70;
  --z-modal:      80;
  --z-toast:      90;
  --z-cmdk:       100;
  --z-tooltip:    110;
}

/* ──────────────────────────────────────────────────────────────────────────
   Base reset + body
   ────────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
#root { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
}
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-semi); letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Scrollbars — minimal */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); background-clip: padding-box; border: 2px solid transparent; }

/* Selection */
::selection { background: var(--accent-soft); color: var(--accent-press); }

/* Utility */
.bp-muted   { color: var(--fg-muted); }
.bp-subtle  { color: var(--fg-subtle); }
.bp-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bp-tabular { font-variant-numeric: tabular-nums; }
.bp-hidden  { display: none !important; }
.bp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }