/* ─── DESIGN TOKENS ───
   Источник: Design_system/project/colors_and_type.css (handoff-бандл Claude Design).
   Design_system/ не подключается напрямую как static source — это не Django-приложение,
   поэтому production-значения токенов синхронизируются сюда вручную при обновлении дизайн-системы. */
:root {
  /* Brand — warm signal orange */
  --brand-50:  #FFF3EE;
  --brand-100: #FFE1D3;
  --brand-200: #FFC1A4;
  --brand-300: #FF9B6A;
  --brand-400: #FF7637;
  --brand-500: #FE5F1A;
  --brand-600: #E84A07;
  --brand-700: #BC3A05;
  --brand-800: #8E2C04;
  --brand-900: #5F1D03;

  /* Ink — deep cool neutral */
  --ink-50:  #F6F7F9;
  --ink-100: #ECEEF2;
  --ink-200: #D9DEE6;
  --ink-300: #B9C0CD;
  --ink-400: #8E97A8;
  --ink-500: #6B7384;
  --ink-600: #4E5566;
  --ink-700: #353B4A;
  --ink-800: #1F2330;
  --ink-900: #0F121C;

  /* Warm paper */
  --paper-50:  #FAF8F5;
  --paper-100: #F4F0E9;

  /* Semantic status */
  --green-50:  #ECFDF3;
  --green-500: #16A34A;
  --green-700: #15803D;
  --amber-50:  #FFF8EB;
  --amber-500: #F59E0B;
  --amber-700: #B45309;
  --red-50:    #FEF1F2;
  --red-500:   #DC2626;
  --red-700:   #B91C1C;
  --info-50:   #EEF4FF;
  --info-500:  #2563EB;
  --info-700:  #1D4ED8;

  /* Semantic UI tokens */
  --fg-1: #0F121C;
  --fg-2: #353B4A;
  --fg-3: #6B7384;
  --fg-4: #8E97A8;
  --fg-inverse: #FFFFFF;
  --fg-brand: #E84A07;

  --bg-canvas:       #FFFFFF;
  --bg-subtle:       #F6F7F9;
  --bg-muted:        #ECEEF2;
  --bg-paper:        #FAF8F5;
  --bg-inverse:      #0F121C;
  --bg-brand:        #FE5F1A;
  --bg-brand-subtle: #FFF3EE;

  --border-1:      #D9DEE6;
  --border-2:      #B9C0CD;
  --border-subtle: #ECEEF2;

  --ring:            0 0 0 3px rgba(254, 95, 26, 0.22);
  --hover-overlay:   rgba(15, 18, 28, 0.04);
  --press-overlay:   rgba(15, 18, 28, 0.08);
  --selection-bg:    rgba(254, 95, 26, 0.18);

  --status-open-bg:        #EEF4FF;
  --status-open-fg:        #1D4ED8;
  --status-in-progress-bg: #FFF8EB;
  --status-in-progress-fg: #B45309;
  --status-completed-bg:   #ECFDF3;
  --status-completed-fg:   #15803D;
  --status-cancelled-bg:   #ECEEF2;
  --status-cancelled-fg:   #4E5566;

  /* Typography */
  --font-display: 'Onest', system-ui, -apple-system, sans-serif;
  --font-body:    'Onest', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

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

  /* Radii */
  --r-xs:     4px;
  --r-sm:     6px;
  --r-md:     10px;
  --r-lg:     14px;
  --r-xl:     20px;
  --r-pill:   999px;
  --r-circle: 50%;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(15,18,28,0.05);
  --shadow-sm:    0 1px 2px rgba(15,18,28,0.06), 0 2px 4px rgba(15,18,28,0.04);
  --shadow-md:    0 4px 12px rgba(15,18,28,0.08);
  --shadow-lg:    0 12px 32px rgba(15,18,28,0.12);
  --shadow-pop:   0 8px 24px rgba(254,95,26,0.28);
  --shadow-inset: inset 0 1px 2px rgba(15,18,28,0.08);

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    260ms;

  /* Layout */
  --z-sticky: 50;
  --z-modal:  100;
  --z-toast:  200;
}