/* ═══════════════════════════════════════════════════
   ZiAlt — Design Tokens
   Единый источник CSS custom properties.
   Используется всеми layouts: landing, app, dashboard, admin.

   Значения — из пакета редизайна (design_handoff_redesign/README.md).
   Имена переменных сохранены прежними, чтобы components.css/dashboard.css
   не переписывать целиком.
═══════════════════════════════════════════════════ */

:root {
  /* ── Colors: light theme (default) ── */
  --color-bg:            #f6f7f9;
  --color-bg-alt:        #f1f5f9;
  --color-surface:       #ffffff;
  --color-surface-2:     #f1f5f9;
  --color-surface-hover: #f6f7f9;

  --color-border:        #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-focus:  rgba(79, 70, 229, 0.35);

  --color-text:          #0f172a;
  --color-text-2:        #475569;
  --color-text-3:        #64748b;
  --color-text-inverse:  #ffffff;

  /* ── Accent / Primary ── */
  --color-primary:       #4f46e5;
  --color-primary-dark:  #4338ca;
  --color-primary-light: #818cf8;
  --color-primary-glow:  rgba(79, 70, 229, 0.12);
  --color-primary-subtle:#eef0fe;
  --color-primary-border:#c7d2fe;

  /* ── Nav active state (сайдбар/табы) ── */
  --color-nav-active-bg:   #eef0fe;
  --color-nav-active-text: #4338ca;
  --color-nav-active-dot:  #4f46e5;

  /* ── Semantic ── */
  --color-success:        #166534;
  --color-success-bg:     #dcfce7;
  --color-success-border: #bbf7d0;
  --color-success-dot:    #16a34a;

  --color-warning:        #92400e;
  --color-warning-bg:     #fef3c7;
  --color-warning-border: #fcd34d;
  --color-warning-dot:    #f59e0b;

  --color-danger:         #b91c1c;
  --color-danger-bg:      #fee2e2;
  --color-danger-border:  #fca5a5;
  --color-danger-dot:     #dc2626;

  --color-info:          #1d4ed8;
  --color-info-bg:       rgba(59, 130, 246, 0.12);
  --color-info-border:   rgba(59, 130, 246, 0.25);

  /* ── Typography ── */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15.5px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  26px;
  --text-3xl:  30px;
  --text-4xl:  38px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em; /* заголовок страницы */
  --tracking-wide:   0.1em;   /* надзаголовки/eyebrow, вместе с uppercase */

  /* ── Spacing ── */
  --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;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radius ── */
  --radius-sm:     8px;   /* бейдж */
  --radius-md:     10px;  /* кнопка */
  --radius-chip:   12px;  /* плашка / поле */
  --radius-nested: 15px;  /* вложенный блок */
  --radius-lg:     16px;  /* карточка */
  --radius-xl:     20px;
  --radius-full:   9999px;

  /* ── Shadows ── */
  --shadow-xs:     0 1px 3px rgba(15, 23, 42, 0.10);
  --shadow-sm:     0 4px 12px -6px rgba(15, 23, 42, 0.18);
  --shadow-md:     0 12px 32px -20px rgba(15, 23, 42, 0.28);   /* карточка */
  --shadow-lg:     0 20px 48px -24px rgba(15, 23, 42, 0.32);
  --shadow-accent: 0 10px 26px -20px rgba(79, 70, 229, 0.5);   /* активный акцентный элемент */

  /* ── Transitions ── */
  --transition:    0.18s ease;
  --transition-lg: 0.28s ease;

  /* ── Code blocks ── */
  --color-code-bg:     #0d1117;
  --color-code-bg-2:   #161b27;
  --color-code-text:   #c9d1d9;
  --color-code-stdout: #58d68d;
  --color-code-stderr: #e74c3c;

  /* ── Layout ── */
  --sidebar-width:       244px;
  --sidebar-width-admin: 220px;
  --header-height:       60px;
  --content-max-width:   1200px;

  /* ── Тёмная плоскость (герой-блоки: активная домашка, ближайшее занятие) ──
     Не из README-таблицы тёмной темы напрямую: герой и так контрастная
     "тёмная плоскость" на светлом фоне; в тёмной теме для заметности становится
     "поднятым блоком" (тем самым #232830 из палитры), а не слипается с фоном
     страницы. Текст/иконки внутри героя — фиксированные (см. тех же блоков
     код-редактора в Assignments/Start) не тема-зависимые: сам герой остаётся
     "тёмным островом" независимо от темы страницы. ── */
  --color-plane: #0f172a;

  /* ── Snackbar (плавающее уведомление, всегда "тёмная плоскость") ── */
  --color-snackbar-bg:          #0f172a;
  --color-snackbar-border:      transparent;
  --color-snackbar-action-text: #ffffff;

  /* ── Расписание: цвета типов занятий (помимо индивидуального — переиспользует --color-primary*) ── */
  --color-group-bg:       #fff7ed;
  --color-group-border:   #fed7aa;
  --color-group-text:     #9a3412;
  --color-group-text-2:   #c2410c;
  --color-request-border: #a5b4fc;

  /* ═══ Визуальная система редизайна (CLAUDE.md) — токены для компонентов ui-* ═══
     Старые переменные выше не меняются, на них держатся ещё не переведённые страницы. */
  --ui-bg:            #f6f7f9;   /* фон приложения */
  --ui-surface:       #ffffff;
  --ui-sub:           #eef1f5;   /* подложка в карточке, трек прогресса, сноска */
  --ui-sub-2:         #f1f5f9;   /* вторая подложка, нейтральная метка/аватар */
  --ui-text:          #0f172a;
  --ui-text-body:     #334155;   /* вторичный, кнопки */
  --ui-text-2:        #475569;   /* вторичный, пункты меню, чипы */
  --ui-text-3:        #64748b;   /* третичный: подзаголовки, крошки */
  --ui-text-muted:    #94a3b8;   /* приглушённый: счётчики, подписи, надзаголовки */
  --ui-border:        #e2e8f0;
  --ui-border-soft:   #e9edf2;   /* сайдбар */
  --ui-border-subtle: #eef1f5;   /* разделители внутри карточек */
  --ui-border-strong: #cbd5e1;   /* активная граница, вторичная кнопка, черновик */

  --ui-accent:        #4f46e5;
  --ui-accent-dark:   #4338ca;
  --ui-accent-darker: #3730a3;
  --ui-accent-bg:     #eef0fe;
  --ui-accent-bg-2:   #e0e7ff;
  --ui-accent-border: #c7d2fe;
  --ui-accent-light:  #818cf8;
  --ui-accent-lighter:#a5b4fc;
  --ui-on-accent:     #ffffff;

  --ui-success:       #16a34a;
  --ui-success-bg:    #dcfce7;
  --ui-success-text:  #166534;
  --ui-success-light: #a7f3d0;
  --ui-warning:       #f59e0b;
  --ui-warning-bg:    #fef3c7;
  --ui-warning-text:  #92400e;
  --ui-warning-light: #fde68a;
  --ui-danger:        #dc2626;
  --ui-danger-bg:     #fee2e2;
  --ui-danger-text:   #b91c1c;
  --ui-danger-border: #fecaca;
  --ui-danger-light:  #fca5a5;
  --ui-info-bg:       #e0e7ff;
  --ui-info-text:     #3730a3;
  --ui-neutral-bg:    #f1f5f9;
  --ui-neutral-text:  #475569;

  /* Тёмная поверхность (комната занятия, код, тёмная карточка-пояснение) — одинакова в обеих темах */
  --ui-dark:          #0f172a;
  --ui-dark-deep:     #0b1220;
  --ui-dark-raised:   #131c2e;
  --ui-dark-raised-2: #1e293b;
  --ui-on-dark:       #e2e8f0;
  --ui-on-dark-2:     #cbd5e1;
  --ui-on-dark-3:     #64748b;
  --ui-on-dark-lineno:#475569;

  /* Типографика */
  --ui-fs-h1:         27px;
  --ui-fs-h1-mobile:  22px;
  --ui-fs-h2:         23px;
  --ui-fs-subtitle:   14.5px;
  --ui-fs-crumbs:     13.5px;
  --ui-fs-card-title: 16.5px;
  --ui-fs-body:       14.5px;
  --ui-fs-small:      13.5px;
  --ui-fs-micro:      12.5px;
  --ui-fs-eyebrow:    12px;

  /* Радиусы: 5 7 8 9 10 11 12 13 14 15 16 18 26 36 50% */
  --ui-r-5: 5px;  --ui-r-7: 7px;  --ui-r-8: 8px;  --ui-r-9: 9px;  --ui-r-10: 10px;
  --ui-r-11: 11px; --ui-r-12: 12px; --ui-r-13: 13px; --ui-r-14: 14px; --ui-r-15: 15px;
  --ui-r-16: 16px; --ui-r-18: 18px; --ui-r-26: 26px; --ui-r-36: 36px;

  /* Тени */
  --ui-shadow-window:      0 12px 32px -20px rgba(15, 23, 42, 0.28);
  --ui-shadow-window-dark: 0 12px 32px -20px rgba(15, 23, 42, 0.38);
  --ui-shadow-phone:       0 16px 40px -24px rgba(15, 23, 42, 0.5);
  --ui-shadow-segment:     0 1px 2px rgba(15, 23, 42, 0.10);
}

/* ── Dark theme overrides ──
   Не инверсия светлой: иерархия строится тоном, не тенями. Акцент и статусные
   цвета светлеют на два шага; текст на акценте — тёмный (#14161a), не белый. */
[data-theme="dark"] {
  --color-bg:           #14161a;
  --color-bg-alt:       #181a1e;
  --color-surface:      #1b1e24;
  --color-surface-2:    #232830;
  --color-surface-hover:#232830;

  --color-border:       #22262d;
  --color-border-strong:#343a44;
  --color-border-focus: rgba(129, 140, 248, 0.45);

  --color-text:         #f1f3f7;
  --color-text-2:       #a8b0bd;
  --color-text-3:       #6d7684; /* минимально допустимый для мелкого текста — #8b93a1 */
  --color-text-inverse: #14161a;

  --color-primary:       #818cf8;
  --color-primary-dark:  #a5b4fc;
  --color-primary-light: #c7d2fe;
  --color-primary-glow:  rgba(129, 140, 248, 0.18);
  --color-primary-subtle:#2b2f52;
  --color-primary-border:#3d4275;

  --color-nav-active-bg:   #2b2f52;
  --color-nav-active-text: #c7ccff;
  --color-nav-active-dot:  #818cf8;

  --color-success:        #bbf7d0;
  --color-success-bg:     #173d29;
  --color-success-border: #1f5236;
  --color-success-dot:    #4ade80;

  --color-warning:        #fde68a;
  --color-warning-bg:     #3d3117;
  --color-warning-border: #52411c;
  --color-warning-dot:    #fbbf24;

  --color-danger:         #fca5a5;
  --color-danger-bg:      #4a2226;
  --color-danger-border:  #5c2b30;
  --color-danger-dot:     #f87171;

  --shadow-xs: 0 1px 3px  rgba(0, 0, 0, 0.20);
  --shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.44);

  --color-plane: #232830;

  --color-snackbar-bg:          #232830;
  --color-snackbar-border:      #343a44;
  --color-snackbar-action-text: #a5b4fc;

  --color-group-bg:       #2b2013;
  --color-group-border:   #4a3418;
  --color-group-text:     #fdba74;
  --color-group-text-2:   #fb923c;
  --color-request-border: #4c4f8a;

  /* ui-* в тёмной теме — по палитре design_handoff_redesign (16 Dark theme): тоном, не тенями */
  --ui-bg:            #14161a;
  --ui-surface:       #1b1e24;
  --ui-sub:           #232830;
  --ui-sub-2:         #232830;
  --ui-text:          #f1f3f7;
  --ui-text-body:     #e2e5ea;
  --ui-text-2:        #a8b0bd;
  --ui-text-3:        #8b93a1;
  --ui-text-muted:    #6d7684;
  --ui-border:        #2e343d;
  --ui-border-soft:   #22262d;
  --ui-border-subtle: #262b33;
  --ui-border-strong: #343a44;
  --ui-accent:        #818cf8;
  --ui-accent-dark:   #a5b4fc;
  --ui-accent-darker: #c7ccff;
  --ui-accent-bg:     #2b2f52;
  --ui-accent-bg-2:   #2b2f52;
  --ui-accent-border: #3d4275;
  --ui-on-accent:     #14161a;
  --ui-success:       #4ade80;
  --ui-success-bg:    #173d29;
  --ui-success-text:  #bbf7d0;
  --ui-warning:       #fbbf24;
  --ui-warning-bg:    #3d3117;
  --ui-warning-text:  #fde68a;
  --ui-danger:        #f87171;
  --ui-danger-bg:     #4a2226;
  --ui-danger-text:   #fca5a5;
  --ui-danger-border: #5c2b30;
  --ui-info-bg:       #2b2f52;
  --ui-info-text:     #c7ccff;
  --ui-neutral-bg:    #232830;
  --ui-neutral-text:  #a8b0bd;
  --ui-shadow-window: none;
  --ui-shadow-segment: none;
}