/* ============================================================
   BSS · CX-платформа — дизайн-система (main.css)
   Токены/типографика/компоненты 1:1 из Figma node 1732-4646.
   Слои: reset → tokens → base → grid → components → utilities
   ============================================================ */

/* ---------- шрифт: Graphik LC (self-hosted, есть кириллица) ---------- */
@font-face{font-family:'Graphik LC';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/Graphik-Regular-Web.woff2') format('woff2'),url('../fonts/Graphik-Regular.otf') format('opentype')}
@font-face{font-family:'Graphik LC';font-weight:500;font-style:normal;font-display:swap;
  src:url('../fonts/Graphik-Medium.otf') format('opentype')}
@font-face{font-family:'Graphik LC';font-weight:700;font-style:normal;font-display:swap;
  src:url('../fonts/Graphik-Bold-Web.woff2') format('woff2'),url('../fonts/Graphik-Bold.otf') format('opentype')}

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

/* ===================== TOKENS ===================== */
@layer tokens{
  :root{
    /* --- шкала отступов (px) --- */
    --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px;
    --sp-28:28px; --sp-32:32px; --sp-36:36px; --sp-48:48px; --sp-64:64px; --sp-80:80px;
    --sp-96:96px; --sp-118:118px;
    /* --- радиусы --- */
    --radius-m:12px; --radius-l:16px; --radius-xl:24px; --radius-2xl:32px; --radius-max:999px;
    /* Единое скругление всех плашек-карточек. Исключение только hero (40).
       Меняется в одном месте — карточки не могут разъехаться. */
    --radius-card:var(--radius-l);
    /* ПРАВИЛО: у ВСЕХ плашек горизонтальный отступ одинаковый — слева = справа = --pad-card.
       Ни одна карточка не заводит своё значение по бокам; вертикальный отступ может
       отличаться (например, у CTA сверху 44, чтобы заголовок встал вровень с формой).
       Исключение — мелкие UI-карточки внутри меню (промо 232px), у них своя шкала. */
    --pad-card:28px;
    /* --- фон --- */
    --bg-primary:#ffffff; --bg-secondary:#f3f3f3; --bg-tertiary:#0e141f;
    --bg-quaternary:#232936; --bg-accent:#472bff; --dark:#141b34;
    /* --- текст --- */
    --text-primary:#0f1825; --text-secondary:#6c6e79; --text-tertiary:#a3acba; --text-accent:#472bff;
    --text-primary-on:#ffffff; --text-secondary-on:#ffffffbf; --text-tertiary-on:#a3acba;
    /* --- кнопки --- */
    --btn-primary:#472bff; --btn-primary-hover:#391eed; --btn-primary-pressed:#1b04b4; --btn-disabled:#dedede;
    --btn-secondary:#f3f3f3; --btn-secondary-hover:#ebebeb; --btn-secondary-pressed:#d7d7d7;
    --btn-secondary-on:#ffffff; --btn-secondary-on-hover:#ffffffd9; --btn-secondary-on-pressed:#ffffffbf; --btn-secondary-on-disabled:#ffffff4d;
    --btn-tertiary-on:#ffffff26; --btn-tertiary-on-hover:#ffffff40; --btn-tertiary-on-pressed:#ffffff1a; --btn-tertiary-on-disabled:#ffffff4d;
    --btn-dark:#232936; --btn-dark-hover:#434b5e; --btn-dark-pressed:#181d26;
    --btn-error:#b80e0e; --btn-success:#0fa267;
    /* --- инпуты --- */
    --input-default:#f3f3f3; --input-hover:#ebebeb; --input-pressed:#ebebeb; --input-disabled:#e3e3e3; --input-error:#fff6f6;
    /* --- иконки --- */
    --icon-primary:#0f1825; --icon-secondary:#515151; --icon-accent:#472bff; --icon-primary-on:#ffffff; --icon-secondary-on:#b6b6b7;
    /* --- обводки --- */
    --stroke-primary:#ededed; --stroke-secondary:#252627; --stroke-accent:#472bff; --stroke-on:#202a3d;
    /* --- табы / теги / карточки наград --- */
    --tab-active:#ebefff; --tab-default:#f3f3f3; --tab-hover:#ebebeb;
    --tag-default:#ebefff; --tag-hover:#c8d2ff;
    --award-default:#232936; --award-hover:#2d3446; --award-pressed:#1e2430;
    /* --- шрифт --- */
    --font:'Graphik LC','Inter','Helvetica Neue',Arial,sans-serif;
    /* --- сетка / «резина» ---
       Поля 1:1 из макета: 393→20, 712→32, 1000→36, 1280→64, 1440→118.
       Контент при этом = 353 / 648 / 928 / 1152 / 1204 — как в Figma.
       Шире 1440 контент растёт и стопорится на 1340. */
    --max-width:1340px;
    --margin:20px;
    --gutter:8px;       /* межколонник карточек в макете = 8 */
  }
  @media (max-width:712px){  :root{ --pad-card:24px } }
  @media (min-width:712px){  :root{ --margin:32px } }
  @media (min-width:1000px){ :root{ --margin:36px } }
  @media (min-width:1280px){ :root{ --margin:64px } }
  @media (min-width:1440px){ :root{ --margin:118px } }
}

/* ===================== RESET ===================== */
@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-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;margin:0;padding:0}
  html:focus-within{scroll-behavior:smooth}
  body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  img,picture,svg,video,canvas{display:block;max-width:100%}
  input,button,textarea,select{font:inherit;color:inherit}
  button{cursor:pointer;background:none;border:0}
  a{color:inherit;text-decoration:none}
  @media (prefers-reduced-motion:reduce){
    html:focus-within{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  }
}

/* ===================== BASE ===================== */
@layer base{
  body{font-family:var(--font);font-weight:400;font-size:16px;line-height:24px;
    color:var(--text-primary);background:var(--bg-primary)}
  ::selection{background:color-mix(in srgb,var(--bg-accent) 22%,transparent)}

  /* --- типографика (Text/* из Figma) --- */
  .t-h1{font-weight:500;font-size:52px;line-height:52px;letter-spacing:-.03em}
  .t-h2{font-weight:500;font-size:40px;line-height:44px;letter-spacing:-.03em}
  .t-h3{font-weight:500;font-size:24px;line-height:28px;letter-spacing:-.03em}
  .t-h4{font-weight:500;font-size:20px;line-height:24px;letter-spacing:-.03em}
  .t-p{font-weight:400;font-size:16px;line-height:24px}
  .t-p-medium{font-weight:500;font-size:16px;line-height:24px}
  .t-p-sm{font-weight:400;font-size:14px;line-height:20px}
  .t-p-sm-medium{font-weight:500;font-size:14px;line-height:20px}
  .t-p-xs{font-weight:400;font-size:12px;line-height:16px}
  .t-label{font-weight:500;font-size:14px;line-height:24px}
  /* мобильные размеры заголовков (Text/Mobile/*) */
  @media (max-width:712px){
    .t-h1{font-size:36px;line-height:36px;letter-spacing:-.06em}
    .t-h2{font-size:30px;line-height:36px}
    .t-h3{font-size:24px;line-height:28px}
  }
}

/* ===================== GRID / «резина» ===================== */
@layer grid{
  /* контент стопорится на 1340; фон/hero — на всю ширину */
  .container{width:100%;max-width:calc(var(--max-width) + var(--margin) * 2);
    margin-inline:auto;padding-inline:var(--margin)}
  /* «внутренний» контейнер для hero: hero сам отступает 16 по бокам,
     а его контент выравнивается по той же сетке */
  .container--hero{padding-inline:calc(var(--margin) - 16px)}
  @media (max-width:712px){ .container--hero{padding-inline:12px} }
  .section{padding-block:var(--sp-96)}          /* 96 — как в макете */
  @media (max-width:1000px){ .section{padding-block:var(--sp-64)} }
  @media (max-width:712px){ .section{padding-block:var(--sp-48)} }
  /* полноширинная секция: фон на всю ширину, контент внутри .container */
  .bleed{width:100%}
  .grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
}

/* ===================== COMPONENTS ===================== */
@layer components{
  /* ---- Кнопки ---- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
    height:48px;padding:0 24px;border-radius:var(--radius-max);
    font-weight:500;font-size:16px;line-height:24px;white-space:nowrap;
    transition:background-color .15s,color .15s,transform .15s,box-shadow .15s;user-select:none}
  .btn:active{transform:translateY(1px)}
  .btn--sm{height:40px;padding:0 20px;font-size:14px}
  .btn--lg{height:56px;padding:0 28px}
  .btn--primary{background:var(--btn-primary);color:#fff}
  .btn--primary:hover{background:var(--btn-primary-hover)}
  .btn--primary:active{background:var(--btn-primary-pressed)}
  .btn--secondary{background:var(--btn-secondary);color:var(--text-primary)}
  .btn--secondary:hover{background:var(--btn-secondary-hover)}
  .btn--secondary:active{background:var(--btn-secondary-pressed)}
  .btn--dark{background:var(--btn-dark);color:#fff}
  .btn--dark:hover{background:var(--btn-dark-hover)}
  .btn--dark:active{background:var(--btn-dark-pressed)}
  /* на цветном/тёмном фоне */
  .btn--on-primary{background:var(--btn-secondary-on);color:var(--text-primary)}
  .btn--on-primary:hover{background:var(--btn-secondary-on-hover)}
  .btn--on-tertiary{background:var(--btn-tertiary-on);color:#fff}
  .btn--on-tertiary:hover{background:var(--btn-tertiary-on-hover)}
  .btn[disabled],.btn.is-disabled{background:var(--btn-disabled);color:#fff;pointer-events:none}
  .btn__arw{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;flex:0 0 auto}
  .btn__arw svg{width:11px;height:11px}
  .btn--primary .btn__arw svg{color:var(--btn-primary)}

  /* ---- Инпут / форма ---- */
  /* ---- Поле ввода 1:1 из компонента Figma Input (1020:4503) ----
     Пусто:      padding 16, текст-подсказка 16/24 --text-secondary.
     Заполнено/фокус: лейбл уезжает наверх (12/16), значение остаётся внизу —
     подпись поля видна всегда. Работает на :placeholder-shown, поэтому
     у input обязателен placeholder=" " (один пробел). */
  .field{position:relative;display:block}
  .input{display:block;width:100%;height:56px;padding:16px;border-radius:var(--radius-m);
    border:1px solid transparent;background:var(--input-default);color:var(--text-primary);
    font-family:inherit;font-size:16px;line-height:24px;
    transition:background .16s,border-color .16s,padding .18s}
  .input::placeholder{color:transparent}
  .field__label{position:absolute;left:17px;top:50%;transform:translateY(-50%);
    font-weight:400;font-size:16px;line-height:24px;color:var(--text-secondary);
    pointer-events:none;transition:top .18s,font-size .18s,line-height .18s,transform .18s}
  .field .input:focus + .field__label,
  .field .input:not(:placeholder-shown) + .field__label{
    top:10px;transform:none;font-size:12px;line-height:16px}
  .field .input:focus,
  .field .input:not(:placeholder-shown){padding-top:24px;padding-bottom:8px}
  .input:hover{background:var(--input-hover);border-color:var(--stroke-primary)}
  .input:focus{outline:none;background:var(--input-pressed);border-color:var(--stroke-accent)}
  .input[disabled]{background:var(--input-disabled);color:var(--text-tertiary);cursor:not-allowed}
  .input.is-error,.field-err .input{background:var(--input-error);border-color:var(--btn-error)}
  textarea.input{height:auto;min-height:120px;resize:vertical}
  .field__hint{font-size:12px;line-height:16px;color:var(--text-tertiary)}
  .field.is-error .field__hint{color:var(--btn-error)}
  .field.is-success .field__hint{color:var(--btn-success)}

  /* ---- Табы ---- */
  .tabs{display:inline-flex;gap:var(--sp-8);padding:var(--sp-4);background:var(--bg-secondary);border-radius:var(--radius-max)}
  .tab{height:40px;padding:0 20px;border-radius:var(--radius-max);font-weight:500;font-size:14px;
    color:var(--text-secondary);background:var(--tab-default);transition:.15s}
  .tab:hover{background:var(--tab-hover)}
  .tab.is-active{background:var(--tab-active);color:var(--text-accent)}

  /* ---- Тег ---- */
  .tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--radius-max);
    font-weight:500;font-size:12px;line-height:16px;color:var(--text-accent);background:var(--tag-default);transition:.15s}
  .tag:hover{background:var(--tag-hover)}

  /* ---- Section label (эйброу) ----
     Стиль Text/Section label из Figma: Graphik LC Medium 14/24, letter-spacing 0.
     Разрядки в макете НЕТ — не добавлять. */
  .section-label{display:inline-block;font-weight:500;font-size:14px;line-height:24px;
    letter-spacing:0;text-transform:uppercase;color:var(--text-accent)}
  .section-label--on-color{color:var(--text-primary-on)}

  /* ---- Карточка ---- */
  .card{background:var(--bg-secondary);border-radius:var(--radius-card);padding:var(--pad-card)}
  .card--dark{background:var(--award-default);color:#fff}
}

/* ===================== UTILITIES ===================== */
@layer utilities{
  .u-center{display:flex;align-items:center;justify-content:center}
  .u-stack{display:flex;flex-direction:column}
  .u-muted{color:var(--text-secondary)}
  .u-accent{color:var(--text-accent)}
  .u-on{color:#fff}
  .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}