/* ============================================================
   Alabuga UI Kit — дизайн-токены
   Источник: Айдентика_и_дизайн-токены_v1.md + прототип (brand.tsx)
   Тема: светлая (единственная). Тёмную при необходимости строить
   на индиго #2B2F87 как фоне, не на чёрном.
   ============================================================ */

/* ---------- Шрифты (самостоятельный хостинг) ----------
   Muller — коммерческий шрифт Fontfabric: перед выкладкой в прод
   подтвердить web-лицензию (открытый вопрос №3 в документе айдентики).
   Open Sans / PT Sans — свободные (Google Fonts), недостающие
   начертания (SemiBold и т.п.) можно добрать оттуда. */

@font-face {
  font-family: "Muller";
  src: url("./fonts/muller/Muller-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Muller";
  src: url("./fonts/muller/Muller-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Muller";
  src: url("./fonts/muller/Muller-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Muller";
  src: url("./fonts/muller/Muller-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("./fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("./fonts/open-sans/OpenSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("./fonts/open-sans/OpenSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("./fonts/pt-sans/PTSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans Caption";
  src: url("./fonts/pt-sans/PTSansCaption-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Токены ---------- */

:root {
  /* Бренд: сине-голубая палитра (из брендбука) */
  --al-indigo-900: #2b2f87; /* глубокий акцент, старт градиента */
  --al-blue-800: #283a97;
  --al-blue-700: #005dac;
  --al-blue-500: #0083ca;   /* PRIMARY: кнопки, ссылки, активные состояния */
  --al-cyan-400: #00aeef;   /* сигнатурный циан, конец градиента */
  --al-cyan-300: #6acff6;
  --al-cyan-100: #b9e5fb;
  --al-cyan-50: #d9f1fd;

  /* Цвета знака логотипа (не использовать в UI, только в SVG) */
  --al-logo-1: #0555bf;
  --al-logo-2: #0c6ff1;
  --al-logo-3: #3d8df7;
  --al-logo-4: #79b3ff;

  /* Нейтральные (светлая тема) */
  --al-ink-900: #161616;    /* основной текст */
  --al-ink-600: #5a5f73;    /* вторичный текст */
  --al-ink-400: #8a90a3;    /* подсказки, плейсхолдеры */
  --al-line: #e3e8f0;       /* границы, разделители */
  --al-surface-2: #f5f8fc;  /* фон страницы */
  --al-surface: #ffffff;    /* карточки, поверхности */

  /* Семантические */
  --al-success: #16a06b;
  --al-warning: #ef9f27;
  --al-danger: #d64545;
  --al-info: var(--al-blue-500);

  /* Тинты семантических (плашки статусов: фон / текст / бордер) */
  --al-success-bg: #e6f6ee;
  --al-success-fg: #0f7a50;
  --al-success-line: #bfe7d2;
  --al-warning-bg: #fdf1de;
  --al-warning-fg: #a66a0f;
  --al-warning-line: #f5ddb4;
  --al-danger-bg: #fbe3e3;
  --al-danger-fg: #9f2d2d;
  --al-danger-line: #f3c2c2;
  --al-info-bg: var(--al-cyan-50);
  --al-info-fg: var(--al-blue-700);
  --al-info-line: var(--al-cyan-100);
  --al-accent-bg: var(--al-cyan-100);
  --al-accent-fg: var(--al-indigo-900);
  --al-accent-line: var(--al-cyan-300);
  --al-neutral-bg: #eef1f6;
  --al-neutral-fg: var(--al-ink-600);
  --al-neutral-line: var(--al-line);

  /* Фирменный градиент: hero, шапки, welcome, прогресс. Дозированно! */
  --al-gradient: linear-gradient(135deg, #2b2f87 0%, #0083ca 55%, #00aeef 100%);
  --al-gradient-soft: linear-gradient(135deg, #d9f1fd 0%, #ffffff 60%);

  /* Типографика */
  --al-font-display: "Muller", "Arial Black", system-ui, sans-serif;
  --al-font-body: "Open Sans", system-ui, sans-serif;
  --al-font-caption: "PT Sans", "Open Sans", system-ui, sans-serif;

  --al-text-h1: 26px;       /* десктоп-страница; дисплей/hero: 28–32 */
  --al-text-h1-display: 30px;
  --al-text-h2: 24px;
  --al-text-h3: 18px;
  --al-text-card-title: 15px; /* Muller Bold — заголовок виджета/карточки */
  --al-text-body: 16px;
  --al-text-ui: 14px;       /* кнопки, ячейки таблиц, лейблы */
  --al-text-caption: 13px;
  --al-text-chip: 12px;
  --al-text-micro: 11px;

  /* Радиусы (как в прототипе: Tailwind rounded-md/lg/xl/2xl) */
  --al-radius-sm: 6px;      /* иконочные кнопки, кнопки тулбара */
  --al-radius-md: 8px;      /* кнопки, инпуты, пункты меню, плашки */
  --al-radius-lg: 12px;     /* карточки, плитки, контейнер табов */
  --al-radius-xl: 16px;     /* модалки, панели логина, hero-блоки */
  --al-radius-sheet: 28px;  /* верх мобильных bottom-sheet */
  --al-radius-frame: 36px;  /* демо-рамка телефона */
  --al-radius-full: 999px;  /* пилюли, аватары, статус-чипы */

  /* Тени. Принцип прототипа: карточки плоские (бордеры вместо теней),
     тень — только сигнал активного/текущего элемента */
  --al-shadow-active: 0 8px 24px -12px rgba(0, 131, 202, 0.33);  /* активная карточка-кнопка */
  --al-shadow-seg: 0 4px 14px -8px rgba(0, 131, 202, 0.45);      /* активный сегмент переключателя */
  --al-shadow-float: 0 2px 10px rgba(0, 0, 0, 0.08);             /* плавающие лейблы, поповеры */
  --al-shadow-ring-current: 0 0 0 4px var(--al-cyan-100);        /* «текущая» точка степпера */

  /* Отступы (шкала 4px) */
  --al-space-1: 4px;
  --al-space-2: 8px;
  --al-space-3: 12px;
  --al-space-4: 16px;
  --al-space-5: 20px;
  --al-space-6: 24px;
  --al-space-8: 32px;
  --al-space-10: 40px;

  /* Лейаут */
  --al-sidebar-w: 240px;        /* сайдбар HR/админ-десктопа */
  --al-content-max: 1180px;     /* рекомендация; в прототипе контент тянется на всю ширину */
  --al-mobile-w: 390px;         /* базовая ширина мобильного макета (высота фрейма 800) */
  --al-control-h: 40px;         /* высота кнопок/инпутов десктоп */
  --al-control-h-sm: 32px;      /* компактные контролы */
  --al-control-h-lg: 48px;      /* мобильные CTA */

  /* Прочее */
  --al-focus-ring: 0 0 0 3px rgba(0, 131, 202, 0.2);
  --al-overlay: rgba(15, 20, 40, 0.55); /* подложка модалок и шитов */
  --al-transition: 0.15s ease;
}