/* ==========================================================================
   Synergy LMS — beta tokens
   Fluid типографика и отступы (clamp), читательская эстетика.
   Brand цвет используется экономно — только акценты.
   Шкала отступов и шрифтов сгенерирована по принципам Utopia.fyi
   на диапазоне 360–1440 px viewport.
   ========================================================================== */

/* ---------- Self-hosted Raleway (SIL OFL, поставляется с проектом) ----------
   WOFF2 — основной формат, TTF — фолбек для IE/legacy.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/Raleway-Light.woff2") format("woff2"),
       url("../fonts/Raleway-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/Raleway-Regular.woff2") format("woff2"),
       url("../fonts/Raleway-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/Raleway-Medium.woff2") format("woff2"),
       url("../fonts/Raleway-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/Raleway-SemiBold.woff2") format("woff2"),
       url("../fonts/Raleway-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/Raleway-Bold.woff2") format("woff2"),
       url("../fonts/Raleway-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/Raleway-ExtraBold.woff2") format("woff2"),
       url("../fonts/Raleway-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/Raleway-Black.woff2") format("woff2"),
       url("../fonts/Raleway-Black.ttf") format("truetype");
}

@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    /* ---------- Brand (без изменений: брендбук Синергии) ---------- */
    --brand-red:        #ED131C;
    --brand-red-hover:  #C50F17;
    --brand-red-tint:   #FEE5E6;
    --brand-black:      #000000;
    --brand-white:      #FFFFFF;

    /* ---------- Neutral шкала — теплее, чем в v1 (чуть в стороне от чисто-серого) ---------- */
    --ink-1000: #0B0D12;    /* основной текст */
    --ink-900:  #1A1D24;
    --ink-700:  #3B4150;
    --ink-500:  #6B7180;    /* secondary */
    --ink-400:  #8A8F9C;    /* tertiary */
    --ink-300:  #B6BAC4;    /* disabled */
    --ink-200:  #D9DCE3;    /* divider */
    --ink-150:  #E6E8ED;
    --ink-100:  #EFF1F4;    /* sunken */
    --ink-50:   #F6F7F9;    /* page */
    --ink-0:    #FFFFFF;

    /* ---------- Палитра графики (брендбук) — приглушённые ramps для UI ---------- */
    --hue-blue:   #2D6CDF;
    --hue-teal:   #16746E;   /* достаточно тёмный для белого текста: AA */
    --hue-orange: #9C5208;   /* затемнён до AA на белом: 5.1:1 */
    --hue-amber:  #8E6700;
    --hue-purple: #5B2A8C;
    --hue-rose:   #B53048;

    /* ---------- Semantic ---------- */
    --color-text:        var(--ink-1000);
    --color-text-muted:  var(--ink-500);
    --color-text-soft:   var(--ink-400);
    --color-text-on-brand: var(--ink-0);
    --color-accent:      var(--brand-red);
    --color-accent-soft: var(--brand-red-tint);
    --color-bg:          var(--ink-50);
    --color-surface:     var(--ink-0);
    --color-sunken:      var(--ink-100);
    --color-rule:        var(--ink-200);
    --color-rule-soft:   var(--ink-150);

    /* ---------- Типографика ----------
       Web: Raleway (брендбук). Минимум весов чтобы не нагружать.
       Цифры: lining + tabular — критично для KPI и расписания.
    ------------------------------------ */
    --font-sans: "Raleway", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-display: "Raleway", "Inter", system-ui, sans-serif;

    /* Fluid type scale — base 16 @ 360px → base 18 @ 1440px (более крупный body для читаемости) */
    --step--2: clamp(0.6875rem, 0.6699rem + 0.0781vw, 0.75rem);    /* 11 → 12 */
    --step--1: clamp(0.8125rem, 0.7773rem + 0.1563vw, 0.9375rem);  /* 13 → 15 */
    --step-0:  clamp(1rem, 0.9648rem + 0.1563vw, 1.125rem);        /* 16 → 18  ← body */
    --step-1:  clamp(1.1875rem, 1.1172rem + 0.3125vw, 1.4375rem);  /* 19 → 23 */
    --step-2:  clamp(1.375rem, 1.2168rem + 0.7031vw, 1.9375rem);   /* 22 → 31 */
    --step-3:  clamp(1.625rem, 1.3789rem + 1.0938vw, 2.5rem);      /* 26 → 40 */
    --step-4:  clamp(1.9375rem, 1.4805rem + 2.0313vw, 3.5625rem);  /* 31 → 57 */

    --leading-tight: 1.12;
    --leading-snug:  1.25;
    --leading-body:  1.55;
    --leading-relaxed: 1.7;

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

    --tracking-tight: -0.02em;
    --tracking-snug:  -0.01em;
    --tracking-normal: 0;
    --tracking-label: 0.08em;
    --tracking-wide: 0.14em;

    /* OpenType фичи: lining numerals (брендбук) + tabular для табличных чисел */
    --feat-text:  "kern" 1, "liga" 1, "lnum" 1;
    --feat-num:   "kern" 1, "lnum" 1, "tnum" 1;

    /* ---------- Fluid spacing scale ---------- */
    --space-3xs: clamp(0.25rem, 0.2324rem + 0.0781vw, 0.3125rem);   /* 4 → 5 */
    --space-2xs: clamp(0.5rem, 0.4648rem + 0.1563vw, 0.625rem);     /* 8 → 10 */
    --space-xs:  clamp(0.75rem, 0.6797rem + 0.3125vw, 1rem);        /* 12 → 16 */
    --space-s:   clamp(1rem, 0.8945rem + 0.4688vw, 1.375rem);       /* 16 → 22 */
    --space-m:   clamp(1.5rem, 1.2891rem + 0.9375vw, 2.25rem);      /* 24 → 36 */
    --space-l:   clamp(2rem, 1.6484rem + 1.5625vw, 3.25rem);        /* 32 → 52 */
    --space-xl:  clamp(3rem, 2.4023rem + 2.6563vw, 5.125rem);       /* 48 → 82 */
    --space-2xl: clamp(4rem, 3.1523rem + 3.7656vw, 7.0625rem);      /* 64 → 113 */

    /* ---------- Радиусы ---------- */
    --radius-xs:  0.25rem;     /* 4 */
    --radius-sm:  0.5rem;      /* 8 */
    --radius-md:  0.75rem;     /* 12 */
    --radius-lg:  1.25rem;     /* 20 */
    --radius-pill: 999px;

    /* ---------- Тени — минимально, только на overlay'ях ---------- */
    --shadow-overlay: 0 1px 2px rgba(11,13,18,0.04), 0 10px 32px rgba(11,13,18,0.08);
    --shadow-focus:   0 0 0 3px rgba(237, 19, 28, 0.32);

    /* ---------- Анимация ---------- */
    --ease-out: cubic-bezier(0.2, 0, 0, 1);
    --ease-emph: cubic-bezier(0.3, 0, 0, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 360ms;

    /* ---------- Layout dimensions (fluid) ---------- */
    --rail-width: clamp(13rem, 12rem + 4vw, 16.5rem); /* 208 → 264 */
    --topbar-h:   clamp(3.5rem, 3.2rem + 1vw, 4.5rem); /* 56 → 72 */
    --content-max: 76rem;     /* 1216 — соответствует читательской ширине */
    --reading-max: 64rem;     /* для длинного текста: 1024 */
    --gutter:     clamp(1rem, 0.5rem + 2vw, 2.5rem);

    /* z */
    --z-rail: 50;
    --z-topbar: 100;
    --z-overlay: 900;
    --z-modal: 1000;
  }

  /* Тёмная схема — переопределяем только семантику, цвета brand остаются */
  @media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
      --color-text:       #F1F2F5;
      --color-text-muted: #B6BAC4;
      --color-text-soft:  #8A8F9C;
      --color-bg:         #0B0D12;
      --color-surface:    #14171F;
      --color-sunken:     #1A1D24;
      --color-rule:       #2A2E38;
      --color-rule-soft:  #20232C;
    }
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
  img, picture, svg { display: block; max-width: 100%; }
  button { font: inherit; }
  :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  html, body { height: 100%; }

  body {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    font-weight: var(--weight-regular);
    font-feature-settings: var(--feat-text);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Сразу красивая иерархия для прозы и заголовков */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-snug);
    text-wrap: balance;
  }
  h1 { font-size: var(--step-4); letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold); }
  h2 { font-size: var(--step-2); }
  h3 { font-size: var(--step-1); }
  h4 { font-size: var(--step-0); font-weight: var(--weight-semibold); }

  p { max-width: 65ch; }
  ::selection { background: var(--brand-red-tint); color: var(--ink-1000); }

  /* SVG icons (sprite via <use href="#i-..."/>) —
     лежат в base, чтобы компонентные .X .icon могли переопределять размеры через specificity */
  .icon {
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }
}

@layer utilities {
  /* Числа (KPI, расписание) — табличные и lining */
  .num { font-feature-settings: var(--feat-num); font-variant-numeric: tabular-nums lining-nums; }
  /* UPPERCASE-метка */
  .eyebrow {
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    font-weight: var(--weight-semibold);
    color: var(--color-text-soft);
  }
  .stack > * + * { margin-block-start: var(--space-s); }
  .stack-l > * + * { margin-block-start: var(--space-l); }
  .stack-m > * + * { margin-block-start: var(--space-m); }
  .stack-xs > * + * { margin-block-start: var(--space-xs); }

  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}