/* TimeLine Studio — design tokens (SoT)
   Править только здесь. Host отдаёт как /assets/tls-tokens.css.
   Визуальный эталон: winDesk «Заказы» (палитра/типографика), плюс шкала --space-* TLS. */

:root {
  /* Colors (WD Orders language for accents/content) */
  --bg: #e6eaf4;
  --surface: #ffffff;
  --border: #c8cee0;
  --text: #1a1d42;
  --muted: #4e5575;
  --primary: #2f55c8;
  --primary-hover: #2346ad;
  --primary-light: #4d74e8;
  --primary-subtle: rgba(47, 85, 200, 0.12);
  --primary-ring: rgba(47, 85, 200, 0.35);
  --accent: #3ba8e8;
  --accent-subtle: rgba(59, 168, 232, 0.14);
  --link: #1f46a8;
  --link-hover: #17388c;
  --danger: #d43b3b;
  --danger-bg: rgba(212, 59, 59, 0.1);
  --ok: #1f9b62;
  --ok-bg: rgba(31, 155, 98, 0.12);
  --warn: #d4820a;
  --warn-bg: rgba(212, 130, 10, 0.12);
  --row-hover: #eef1f8;
  --row-selected: var(--primary-subtle);
  --shadow: 0 1px 3px rgba(26, 29, 66, 0.08);
  --shadow-card: 0 1px 3px rgba(26, 29, 66, 0.08);
  --shadow-elevated: 0 4px 16px rgba(26, 29, 66, 0.1);
  --shadow-modal: 0 12px 40px rgba(26, 29, 66, 0.18);
  --transition-fast: 0.15s ease;

  /* Shell chrome — тёмный navy (как раньше у --primary shell), не акцентный periwinkle кнопок */
  --sidebar-bg: #1e3a5f;
  --sidebar-bg-hover: #2f5d95;

  /* WD theme aliases (legacy --color-* in winDesk theme leftovers) */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-border: var(--border);
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-light: var(--primary-light);
  --color-primary-subtle: var(--primary-subtle);
  --color-primary-ring: var(--primary-ring);
  --color-accent: var(--accent);
  --color-accent-subtle: var(--accent-subtle);
  --color-link: var(--link);
  --color-link-hover: var(--link-hover);
  --color-success: var(--ok);
  --color-success-bg: var(--ok-bg);
  --color-warning: var(--warn);
  --color-warning-bg: var(--warn-bg);
  --color-danger: var(--danger);
  --color-danger-bg: var(--danger-bg);
  --color-row-hover: var(--row-hover);
  --color-row-selected: var(--row-selected);

  /* Typography */
  --font-family-sans: "Segoe UI", system-ui, sans-serif;
  --font-family-mono: Consolas, "Courier New", monospace;
  --font-size-xs: 0.6875rem;   /* 11px */
  --font-size-sm: 0.75rem;     /* 12px */
  --font-size-md: 0.875rem;    /* 14px */
  --font-size-lg: 1rem;        /* 16px */
  --font-size-xl: 1.375rem;    /* 22px — page title */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --line-height-body: 1.45;
  --line-height-tight: 1.25;
  --font-h1: var(--font-size-xl);
  --font-h2: 1.125rem;
  --font-h3: 1rem;

  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */

  /* Control sizes — desktop matches WD Orders; touch bump via media in ui.css */
  --control-height: 2.25rem; /* ~36px desktop WD */
  --control-height-touch: 2.75rem; /* 44px */

  /* Page & section insets */
  --inset-page: clamp(var(--space-3), 2.5vw, var(--space-5));
  --inset-page-y: clamp(var(--space-2), 2vw, var(--space-4));
  --inset-panel: var(--space-3) var(--space-4);
  --inset-panel-block: var(--space-3) 0;
  --inset-card: clamp(var(--space-3), 3vw, var(--space-4));

  /* Modal */
  --inset-modal: var(--space-4);
  --inset-modal-header: var(--space-4) var(--space-4) var(--space-3);
  --inset-modal-body: var(--space-4);
  --inset-modal-footer: var(--space-3) var(--space-4) var(--space-4);

  /* Form controls (WD desktop padding) */
  --inset-input: var(--space-2) 0.625rem; /* 8px 10px */
  --inset-btn: var(--space-2) var(--space-4); /* 8px 16px */
  --inset-btn-sm: var(--space-1) var(--space-3);

  /* Lists & tables
     Единый ритм: фиксированная высота строки + горизонтальный inset;
     вертикаль выравнивается через vertical-align (эталон WD «Заказы»). */
  --table-font-size: var(--font-size-md);            /* 14px */
  --table-header-font-size: var(--font-size-xs);     /* 11px */
  --table-cell-line-height: var(--line-height-tight);
  --table-header-letter-spacing: 0.05em;
  --table-row-height: 2.75rem;           /* 44px data-row */
  --table-row-height-compact: 2.25rem;   /* 36px .tls-table--compact */
  --table-header-height: 2.5rem;         /* 40px */
  --inset-list-item: var(--space-2) var(--space-3);
  --inset-list-row: var(--space-2) var(--space-3);
  --inset-cell-x: var(--space-4);        /* 16px */
  --inset-cell-y: 0;                     /* высота задаётся --table-*-height */
  --inset-cell: var(--inset-cell-y) var(--inset-cell-x);
  --inset-cell-compact-x: var(--space-3);
  --inset-cell-compact-y: 0;
  --inset-cell-compact: var(--inset-cell-compact-y) var(--inset-cell-compact-x);
  --inset-badge: var(--space-1) var(--space-2);

  /* Gaps */
  --gap-tight: var(--space-1);
  --gap-sm: var(--space-2);
  --gap-md: var(--space-3);
  --gap-lg: var(--space-4);
  --gap-xl: var(--space-6);

  --gap-page: var(--space-3);
  --gap-list: var(--space-1);
  --gap-stack: var(--space-2);
  --gap-form: var(--space-3);

  --stack-sm: var(--space-2);
  --stack-md: var(--space-3);
  --stack-lg: var(--space-4);

  /* Radius (WD) */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius: var(--radius-md);

  /* Load / utilization chart */
  --chart-load-empty: var(--bg);
  --chart-load-ok: var(--primary-subtle);
  --chart-load-ok-fill: var(--primary);
  --chart-load-busy: var(--warn-bg);
  --chart-load-busy-fill: var(--warn);
  --chart-load-over: var(--danger-bg);
  --chart-load-over-fill: var(--danger);
  --chart-capacity: color-mix(in srgb, var(--primary) 18%, var(--bg));
}