/* =========================================================================
   OnTrack Web — дизайн-токены и типографика.
   Сняты построчно из web_app_front@development:
   - src/plugins/vuetify.js            (тема myCustomLightTheme)
   - src/assets/scss/typography.scss   (шкала .ao-*)
   - src/assets/scss/styles.scss       (шрифты, скроллбар)
   - src/assets/scss/variables.scss    (размеры каркаса)
   ========================================================================= */

/* Inter локально (те же файлы, что у мобильного клона), Manrope — системный fallback */
@font-face{font-family:'Inter';src:url('../../mobile/assets/fonts/Inter_18pt-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../../mobile/assets/fonts/Inter_18pt-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../../mobile/assets/fonts/Inter_18pt-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../../mobile/assets/fonts/Inter_18pt-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ---- бренд (тема Vuetify) ---- */
  --primary:#3F73AB;        /* primary */
  --primary-rgb:63,115,171;
  --primary-50:#ECF1F7;     /* hover-фон, primary-50 из scouting-темы */
  --primary-dark:#325C89;
  --primary-light:#4A86C7;
  --primary-200:#89B4DC;
  --secondary:#D9E3EE;
  --accent:#EA5D31;
  --accent-rgb:234,93,49;
  --green:#83C72C;
  --success:#42A162;
  --success-rgb:66,161,98;
  --warning:#EAB631;
  --warning-rgb:234,182,49;
  --error:#EA4C42;
  --error-rgb:234,76,66;
  --info:#4A86C7;

  /* ---- поверхности ---- */
  --background:#EDF1F2;
  --surface:#FFFFFF;
  --light-grey:#F6F8F9;
  --light-30:#FAFBFB;
  --bg-tech-map:#DCE2E3;
  --panel-grey:#F0F4F7;

  /* ---- границы ---- */
  --border:#DEE6E8;         /* gray-30 */
  --border-soft:#E6EEF3;
  --border-dashed:#D3D9E0;

  /* ---- текстовая лестница ---- */
  --text-900:#0D1722;
  --text-body:#1D2126;
  --black:#22282B;
  --text-800:#3F464E;
  --text-700:#576674;
  --text-600:#86919D;       /* textMuted */
  --text-secondary:#B6BBC2;
  --text-500:#BCC0C7;
  --icon-600:#7E9AAF;

  /* ---- семантические плашки (useStatus / usePriority / PreviewStatus) ---- */
  --status-open-bg:#D9E3EE;    --status-open-fg:#3F73AB;
  --status-done-bg:#DDF0E3;    --status-done-fg:#42A162;
  --status-cancel-bg:#FAF4E6;  --status-cancel-fg:#EAB631;
  --status-other-bg:#DEE6E8;   --status-other-fg:#576674;
  --status-danger-bg:#FFDFDD;  --status-danger-fg:#EA4C42;
  --status-red-soft:#F9D8D1;
  --status-blue-bg:#ECF1F7;    --status-blue-fg:#4A86C7;

  /* ---- шрифты ---- */
  --font-body:'Inter','Roboto',-apple-system,'Segoe UI',sans-serif;
  --font-accent:'Manrope','Inter',sans-serif;

  /* ---- радиусы ---- */
  --r-xs:2px; --r-sm:3px; --r:4px; --r-md:6px; --r-lg:8px;
  --r-xl:12px; --r-sheet:20px; --r-pill:9999px;

  /* ---- тени ---- */
  --shadow-popover:0 4px 16px rgba(95,113,129,.2);
  --shadow-card:0 4px 16px rgba(0,0,0,.1);
  --shadow-float:0 4px 18.1px rgba(0,0,0,.25);
  --shadow-drag:0 3px 5px rgba(34,40,43,.2);
  --shadow-elevation-2:0 3px 1px -2px rgba(0,0,0,.06),0 2px 2px 0 rgba(0,0,0,.043),0 1px 5px 0 rgba(0,0,0,.035);
  --shadow-elevation-4:0 2px 4px -1px rgba(0,0,0,.06),0 4px 5px 0 rgba(0,0,0,.043),0 1px 10px 0 rgba(0,0,0,.035);

  /* ---- каркас ---- */
  --sidebar-rail:56px;
  --sidebar-panel:268px;
  --masters-header-h:54px;
  --view-tabs-h:48px;
  --map-controls-top:16px;
}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{
  height:100%;margin:0;background:var(--background);color:var(--text-body);
  font-family:var(--font-body);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font-family:inherit;border:none;background:none;padding:0;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit}

/* Скроллбар — styles.scss */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{border:3px solid #fff;background:#b5c5d1;border-radius:12px}

/* ---------- Типографика (.ao-*, typography.scss) ---------- */
.ao-h1{font-size:18px;font-weight:600;line-height:135%}
.ao-h2{font-size:16px;font-weight:500;line-height:150%}
.ao-h3{font-size:14px;font-weight:600;line-height:150%}
.ao-h4{font-size:12px;font-weight:500;line-height:150%}
.ao-h5{font-size:10px;font-weight:500;line-height:160%}
.ao-h6{font-size:9px;font-weight:700;line-height:165%}

.ao-p1{font-size:14px;font-weight:500;line-height:135%}
.ao-p1-regular{font-size:14px;font-weight:400;line-height:135%}
.ao-p2-medium{font-size:12px;font-weight:500;line-height:145%}
.ao-p2-regular{font-size:12px;font-weight:400;line-height:150%}
.ao-p3-medium{font-size:11px;font-weight:500;line-height:140%}
.ao-p3-regular{font-size:11px;font-weight:400;line-height:140%}
.ao-p4-medium{font-size:10px;font-weight:500;line-height:140%}
.ao-p4-regular{font-size:10px;font-weight:400;line-height:140%}
.ao-p5{font-size:8px;font-weight:400;line-height:165%}

.ao-c1{font-size:14px;font-weight:400;line-height:160%}
.ao-c2{font-size:10px;font-weight:600;line-height:140%;text-transform:uppercase}
.ao-c2-medium{font-size:12px;font-weight:500;line-height:140%;text-transform:uppercase}
.ao-c3{font-size:10px;font-weight:400;line-height:140%;text-transform:uppercase}
.ao-c4{font-size:10px;font-weight:400;line-height:140%}
.ao-t3{font-family:var(--font-accent);font-size:10px;font-weight:600;line-height:14px;letter-spacing:.02em}
.ao-extra-large-text{font-size:32px;font-weight:600;line-height:42px}
.ao-manrope{font-family:var(--font-accent)}

/* ---------- Цветовые утилиты ---------- */
.text-primary{color:var(--primary)}
.text-success{color:var(--success)}
.text-warning{color:var(--warning)}
.text-error{color:var(--error)}
.text-700{color:var(--text-700)}
.text-600{color:var(--text-600)}
.text-secondary{color:var(--text-secondary)}
.text-icon600{color:var(--icon-600)}
.text-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cursor-pointer{cursor:pointer}