/*
  tokens.css — дизайн-токены (CSS custom properties).
  Тема переключается автоматически по prefers-color-scheme (без ручного тоггла).
  Все пары текст/фон ниже проверены на контраст >= 4.5:1 (см. DESIGN.md, таблица проверки).
*/

:root {
  /* ===== Шрифты ===== */
  --font-sans: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-md: 1rem;       /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.375rem;   /* 22px */
  --fs-2xl: 1.75rem;   /* 28px */
  --fs-3xl: 2.25rem;   /* 36px */

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

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

  /* ===== Отступы (шкала 4px) ===== */
  --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.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* ===== Радиусы ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ===== Длительности переходов =====
     Короткие (focus/hover) переходы сохраняются даже при reduced motion,
     см. блок @media (prefers-reduced-motion) ниже и DESIGN.md. */
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ===== Контейнеры/сетка ===== */
  --container-max: 1200px;
  --sidebar-width: 240px;

  /* ===== Z-индексы ===== */
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* =========================================================
   СВЕТЛАЯ ТЕМА (по умолчанию)
   ========================================================= */
:root,
:root[data-theme="light"] {
  --color-bg: #f5f6f8;
  --color-bg-elevated: #ffffff;
  --color-bg-sunken: #e9ebef;
  --color-surface: #ffffff;
  --color-surface-hover: #eef0f3;
  --color-border: #d4d8df;
  --color-border-strong: #aeb4bf;

  --color-text: #1a1d23;           /* на --color-bg: ~15.5:1 */
  --color-text-muted: #515863;     /* на --color-bg: ~6.3:1 */
  --color-text-inverse: #f7f8fa;

  --color-link: #1d5fd1;           /* на --color-bg: ~5.1:1 */
  --color-link-hover: #164a9e;

  --color-primary: #1d5fd1;
  --color-primary-hover: #164a9e;
  --color-primary-text: #ffffff;   /* на --color-primary: ~5.1:1 */

  --color-success: #176b3a;        /* на --color-bg: ~6.4:1 */
  --color-success-bg: #e2f5e9;
  --color-warning: #8a5a00;        /* на --color-bg: ~5.5:1 */
  --color-warning-bg: #fdf0d9;
  --color-danger: #b3261e;         /* на --color-bg: ~5.6:1 */
  --color-danger-bg: #fbe7e5;
  --color-info: #0d5f85;           /* на --color-bg: ~5.6:1 */
  --color-info-bg: #e1f1f8;

  --color-focus-ring: #1d5fd1;
  --shadow-color: 0deg 0% 0%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.08);
  --shadow-md: 0 4px 10px hsl(var(--shadow-color) / 0.12);
  --shadow-lg: 0 12px 28px hsl(var(--shadow-color) / 0.16);

  color-scheme: light;
}

/* =========================================================
   ТЁМНАЯ ТЕМА
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #15171c;
    --color-bg-elevated: #1c1f26;
    --color-bg-sunken: #0f1115;
    --color-surface: #1e2128;
    --color-surface-hover: #272b34;
    --color-border: #3a3f4a;
    --color-border-strong: #525865;

    --color-text: #eef0f3;          /* на --color-bg: ~16.1:1 */
    --color-text-muted: #b7bcc6;    /* на --color-bg: ~9.5:1 (не серый-на-сером < 4.5) */
    --color-text-inverse: #15171c;

    --color-link: #7eb0ff;          /* на --color-bg: ~8.6:1 */
    --color-link-hover: #a7c9ff;

    --color-primary: #4f8dff;
    --color-primary-hover: #7eb0ff;
    --color-primary-text: #0b1420;  /* на --color-primary: ~7.2:1 */

    --color-success: #5fd68a;       /* на --color-bg: ~10.9:1 */
    --color-success-bg: #15301f;
    --color-warning: #e8b84b;       /* на --color-bg: ~11.0:1 */
    --color-warning-bg: #332707;
    --color-danger: #ff8a80;        /* на --color-bg: ~9.3:1 */
    --color-danger-bg: #3a1613;
    --color-info: #6ecbe8;          /* на --color-bg: ~11.6:1 */
    --color-info-bg: #0f2a33;

    --color-focus-ring: #7eb0ff;
    --shadow-color: 0deg 0% 0%;
    --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.4);
    --shadow-md: 0 4px 10px hsl(var(--shadow-color) / 0.45);
    --shadow-lg: 0 12px 28px hsl(var(--shadow-color) / 0.55);

    color-scheme: dark;
  }
}

/* Явный выбор темы на будущее (если понадобится переключатель),
   сейчас не используется — тема управляется ОС. */
:root[data-theme="dark"] {
  --color-bg: #15171c;
  --color-bg-elevated: #1c1f26;
  --color-bg-sunken: #0f1115;
  --color-surface: #1e2128;
  --color-surface-hover: #272b34;
  --color-border: #3a3f4a;
  --color-border-strong: #525865;
  --color-text: #eef0f3;
  --color-text-muted: #b7bcc6;
  --color-text-inverse: #15171c;
  --color-link: #7eb0ff;
  --color-link-hover: #a7c9ff;
  --color-primary: #4f8dff;
  --color-primary-hover: #7eb0ff;
  --color-primary-text: #0b1420;
  --color-success: #5fd68a;
  --color-success-bg: #15301f;
  --color-warning: #e8b84b;
  --color-warning-bg: #332707;
  --color-danger: #ff8a80;
  --color-danger-bg: #3a1613;
  --color-info: #6ecbe8;
  --color-info-bg: #0f2a33;
  --color-focus-ring: #7eb0ff;
  color-scheme: dark;
}

/* =========================================================
   ЦВЕТА АГЕНТОВ (для аватаров, бейджей и человечков на Коворкинге)
   Каждый цвет подобран так, чтобы --color-text-inverse-on-agent
   (белый или почти чёрный) давал на нём контраст >= 4.5:1.
   См. таблицу использования в DESIGN.md.
   ========================================================= */
:root {
  --agent-alex:   #e8604c; /* менеджер — выделяется первым */
  --agent-jordan: #2f9e6e;
  --agent-john:   #3f7fd1;
  --agent-noah:   #a86bd1;
  --agent-riley:  #d1962f;
  --agent-oliver: #2fb0ad;
  --agent-max:    #c23f73;
  --agent-sam:    #5c8a2f;
  --agent-eli:    #4f6fe0;
  --agent-owen:   #b5752f;
  --agent-quinn:  #2f9ed1;
  --agent-daniel: #8a5fd1;
  --agent-rae:    #d12f6b;
  --agent-theo:   #2fa15c;
  --agent-lena:   #d1562f;
  --agent-ivy:    #3fae8c;
  --agent-kai:    #6a6fe0;
  --agent-nova:   #cf2f9a;
  --agent-drew:   #7a953a;
  --agent-leo:    #2f7fb0;
  --agent-mia:    #e0527a;
  --agent-zoe:    #3f9ed1;
  --agent-ada:    #8f8f3a;
  --agent-gil:    #5a6b7a;
}