/**
 * tokens.css — Agro Space Design System
 * Єдине джерело правди для всього дизайну.
 * Щоб змінити тему — редагуй тільки цей файл.
 */

:root {

  /* ════════════════════════════════════════
     КОЛЬОРИ — Primary (лісовий тіл)
     ════════════════════════════════════════ */
  --color-primary-900:  #1A3D2E;
  --color-primary-800:  #1E4D38;
  --color-primary-700:  #245C42;
  --color-primary:      #2D6A4F;   /* основний */
  --color-primary-500:  #40916C;
  --color-primary-400:  #52B788;
  --color-primary-200:  #B7E4C7;
  --color-primary-100:  #D8F3DC;
  --color-primary-50:   #F0FAF3;
  --color-on-primary:   #FFFFFF;

  /* ════════════════════════════════════════
     КОЛЬОРИ — Secondary (бурштин / врожай)
     ════════════════════════════════════════ */
  --color-secondary-900: #5C2E00;
  --color-secondary-700: #7A4400;
  --color-secondary:     #A45D0A;  /* основний */
  --color-secondary-500: #C97A2A;
  --color-secondary-200: #F5C28A;
  --color-secondary-100: #FDECD1;
  --color-secondary-50:  #FEF6EC;
  --color-on-secondary:  #FFFFFF;

  /* ════════════════════════════════════════
     КОЛЬОРИ — Tertiary (дані / карта)
     ════════════════════════════════════════ */
  --color-tertiary:     #1B4F72;
  --color-tertiary-500: #2980B9;
  --color-tertiary-100: #D6EAF8;
  --color-tertiary-50:  #EAF4FB;
  --color-on-tertiary:  #FFFFFF;

  /* ════════════════════════════════════════
     КОЛЬОРИ — Error / Risk
     ════════════════════════════════════════ */
  --color-error:        #BA1A1A;
  --color-error-500:    #D93025;
  --color-error-100:    #FFDAD6;
  --color-error-50:     #FFF0EE;
  --color-on-error:     #FFFFFF;

  /* ════════════════════════════════════════
     КОЛЬОРИ — Нейтральні поверхні
     ════════════════════════════════════════ */
  --color-background:        #F6F7F4;   /* сторінковий фон */
  --color-surface:           #FFFFFF;   /* картки, панелі */
  --color-surface-container: #F0F2EE;   /* вкладені поверхні */
  --color-surface-variant:   #E8EDE6;   /* hover-стани */
  --color-outline:           #D0D5CE;   /* бордери */
  --color-outline-subtle:    #EAEDE8;   /* тонкі роздільники */

  /* ════════════════════════════════════════
     ТЕКСТ
     ════════════════════════════════════════ */
  --color-text:          #1A2B1F;   /* основний (майже чорний з зеленим підтоном) */
  --color-text-secondary:#4A5C50;   /* вторинний */
  --color-text-muted:    #7A9080;   /* підказки, мета */
  --color-text-disabled: #B0BCB5;

  /* ════════════════════════════════════════
     ШРИФТ
     ════════════════════════════════════════ */
  --font-family:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Розміри (type scale) */
  --text-xs:   10px;
  --text-sm:   11px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;

  /* Вага */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  /* Міжрядковий інтервал */
  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ════════════════════════════════════════
     ВІДСТУПИ (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;

  /* ════════════════════════════════════════
     РАДІУСИ
     ════════════════════════════════════════ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ════════════════════════════════════════
     ТІНІ (MD3 elevation)
     ════════════════════════════════════════ */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-3: 0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-4: 0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.07);

  /* ════════════════════════════════════════
     АНІМАЦІЇ
     ════════════════════════════════════════ */
  --transition-fast:   0.12s ease;
  --transition-normal: 0.20s ease;
  --transition-slow:   0.35s ease;

  /* ════════════════════════════════════════
     ШАРИ (z-index)
     ════════════════════════════════════════ */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-topbar:  400;

  /* ════════════════════════════════════════
     LAYOUT
     ════════════════════════════════════════ */
  --topbar-height:  56px;
  --sidebar-width:  240px;
  --sidebar-collapsed: 56px;
  --content-max:    1440px;
  --content-padding: var(--space-6);

  /* ════════════════════════════════════════
     FEATURE ACCENTS — Notes / Annotations
     ════════════════════════════════════════ */
  --color-notes:      #FF6B35;   /* помаранчево-червоний акцент заміток */
  --color-notes-600:  #F05A20;
  --color-notes-500:  #F7931E;   /* light end for gradients */
  --color-notes-50:   rgba(255, 107, 53, 0.08);
  --shadow-notes-1:   0 2px 4px rgba(255, 107, 53, 0.30);
  --shadow-notes-2:   0 4px 12px rgba(255, 107, 53, 0.30);
  --shadow-notes-3:   0 6px 16px rgba(255, 107, 53, 0.40);

  /* ════════════════════════════════════════
     CONTRACT / PROGRESS STATUS PALETTE
     ════════════════════════════════════════ */
  --color-progress-caution:      #F4C84A;   /* жовтий — застереження */
  --color-progress-caution-end:  #F8D870;
  --color-progress-warning:      #FD7E14;   /* помаранчевий — попередження */
  --color-progress-warning-end:  #FF8F30;
  --color-progress-critical:     var(--color-error);
  --color-progress-critical-end: #E55353;
  --color-progress-expired:      #7952B3;   /* фіолетовий — термін минув */
  --color-progress-expired-end:  #9265C0;

  /* ════════════════════════════════════════
     MAP PANEL ICON ACCENTS
     ════════════════════════════════════════ */
  --color-icon-parcels: #7C4DFF;   /* фіолет — ділянки */
  --color-icon-layers:  #0288D1;   /* блакитний — шари */
  --color-icon-bank:    #00897B;   /* бірюзовий — земельний банк */
}