/* ==========================================================================
   MedAcadem — theme.css
   Дизайн-токены (CSS custom properties), светлая и тёмная темы.
   Подключается ПЕРЕД styles.css, чтобы styles.css мог использовать var().
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Светлая тема (по умолчанию)
   -------------------------------------------------------------------------- */
:root {
  /* --- Бренд --- */
  --color-primary: #1a4d8f;
  --color-primary-dark: #0f3563;
  --color-primary-light: #e8f0fa;
  --color-accent: #00a8a8;
  --color-accent-dark: #007a7a;
  --color-accent-light: #e2f6f6;

  /* --- Поверхности и текст --- */
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-2: #fbfcfe;
  --color-text: #1a1f2e;
  --color-text-muted: #5a6478;
  --color-border: #e1e6ee;

  /* --- Статусы --- */
  --color-success: #2e9e5b;
  --color-success-light: #e6f5ec;
  --color-warning: #e8a33d;
  --color-warning-light: #fdf3e3;
  --color-error: #d64545;
  --color-error-light: #fbeaea;

  /* --- Специальные --- */
  --color-focus: #0b63c5;
  --color-overlay: rgba(12, 20, 34, 0.55);
  --color-shadow: rgba(16, 33, 62, 0.08);
  --color-shadow-strong: rgba(16, 33, 62, 0.16);
  --color-code-bg: #f0f3f8;

  /* --- Типографика --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
    "Liberation Mono", monospace;

  --fs-12: 0.75rem;   /* 12px */
  --fs-14: 0.875rem;  /* 14px */
  --fs-16: 1rem;      /* 16px */
  --fs-18: 1.125rem;  /* 18px */
  --fs-20: 1.25rem;   /* 20px */
  --fs-24: 1.5rem;    /* 24px */
  --fs-32: 2rem;      /* 32px */
  --fs-40: 2.5rem;    /* 40px */
  --fs-56: 3.5rem;    /* 56px */

  --lh-text: 1.5;
  --lh-heading: 1.2;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Сетка и ритм --- */
  --container: 1200px;
  --container-text: 720px;
  --gutter: 1rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Радиусы --- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Тени --- */
  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow: 0 4px 14px var(--color-shadow);
  --shadow-lg: 0 14px 40px var(--color-shadow-strong);

  /* --- Анимации --- */
  --transition-fast: 120ms ease;
  --transition: 200ms ease;
  --transition-slow: 360ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Слои --- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-top: 90;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Тёмная тема
   Применяется через [data-theme="dark"] на <html> (ставится theme.js)
   либо автоматически при prefers-color-scheme: dark, если пользователь
   не выбрал тему вручную ([data-theme="light"] / [data-theme="dark"]).
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-primary: #6aa6ea;
  --color-primary-dark: #4b8ad6;
  --color-primary-light: #16273d;
  --color-accent: #35d0d0;
  --color-accent-dark: #1faeae;
  --color-accent-light: #102f31;

  --color-bg: #0e131c;
  --color-surface: #161d29;
  --color-surface-2: #1b2432;
  --color-text: #eaeef6;
  --color-text-muted: #a3adc0;
  --color-border: #2a3547;

  --color-success: #4fc07c;
  --color-success-light: #14291d;
  --color-warning: #edb45f;
  --color-warning-light: #2c2415;
  --color-error: #ef6b6b;
  --color-error-light: #2e1717;

  --color-focus: #8ec2ff;
  --color-overlay: rgba(3, 6, 12, 0.7);
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-shadow-strong: rgba(0, 0, 0, 0.55);
  --color-code-bg: #1e2735;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-primary: #6aa6ea;
    --color-primary-dark: #4b8ad6;
    --color-primary-light: #16273d;
    --color-accent: #35d0d0;
    --color-accent-dark: #1faeae;
    --color-accent-light: #102f31;

    --color-bg: #0e131c;
    --color-surface: #161d29;
    --color-surface-2: #1b2432;
    --color-text: #eaeef6;
    --color-text-muted: #a3adc0;
    --color-border: #2a3547;

    --color-success: #4fc07c;
    --color-success-light: #14291d;
    --color-warning: #edb45f;
    --color-warning-light: #2c2415;
    --color-error: #ef6b6b;
    --color-error-light: #2e1717;

    --color-focus: #8ec2ff;
    --color-overlay: rgba(3, 6, 12, 0.7);
    --color-shadow: rgba(0, 0, 0, 0.4);
    --color-shadow-strong: rgba(0, 0, 0, 0.55);
    --color-code-bg: #1e2735;

    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   3. Адаптивная шкала типографики
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --gutter: 1.5rem;
    --fs-32: 2.25rem;
    --fs-40: 2.75rem;
    --fs-56: 4rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2rem;
    --fs-56: 3.5rem;
  }
}