/* =====================================================================
   Промокод Ясно — Design System: foundations
   Подключайте этот файл первым в любом HTML/JSX этой системы.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Caveat:wght@500;600&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* ---------------------------------------------------------------------
     COLORS
     --------------------------------------------------------------------- */

  /* Brand */
  --brand-blue:        #3CADEF;   /* CTA, акцент, ссылки                       */
  --brand-blue-press:  #1F95DC;   /* hover/active                              */
  --brand-blue-tint:   #E6F4FD;   /* фон чипов, бейджей                        */
  --brand-blue-ink:    #2C8CCB;   /* рукописные подписи Caveat                 */

  /* Surfaces */
  --bg-page:           #F4F5F7;   /* фон страницы (холодный «бумажный»)        */
  --bg-surface:        #FFFFFF;   /* карточки, попапы, шапка                   */
  --bg-surface-alt:    #FAFBFC;   /* второстепенные блоки                      */

  /* Foregrounds */
  --fg-primary:        #0F1115;   /* H1–H4, body                               */
  --fg-secondary:      #5C6470;   /* подписи, описания                         */
  --fg-muted:          #9097A2;   /* tertiary текст, плейсхолдеры              */
  --fg-on-brand:       #FFFFFF;   /* текст на --brand-blue                     */
  --fg-on-dark:        #FFFFFF;   /* текст на --promo (чёрном бейдже)          */

  /* Borders */
  --border:            #E3E6EB;
  --border-strong:     #CDD2DA;

  /* Semantic */
  --success:           #1FAD66;
  --success-tint:      #E5F6ED;
  --warning:           #E0A53D;
  --warning-tint:      #FBF1DD;
  --danger:            #E64545;
  --danger-tint:       #FCE7E7;

  /* Promo (купонный «лучшее предложение» бейдж — чёрный) */
  --promo:             #0F1115;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------- */

  --font-display: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-strong:  'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Caveat', 'Segoe Script', cursive;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Type scale (desktop) */
  --text-h1:     56px;
  --text-h2:     40px;
  --text-h3:     28px;
  --text-h4:     20px;
  --text-lead:   20px;
  --text-body:   16px;
  --text-small:  14px;
  --text-micro:  12px;
  --text-stat:   56px;   /* большие цифры в блоке статов */

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.4;
  --lh-relaxed:  1.5;

  /* ---------------------------------------------------------------------
     SPACING (8-grid)
     --------------------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* ---------------------------------------------------------------------
     RADII
     --------------------------------------------------------------------- */
  --radius-xs:    6px;   /* бейджи, чипы              */
  --radius-sm:   10px;   /* input, мелкие пиллы       */
  --radius-md:   14px;   /* вторичные карточки        */
  --radius-lg:   20px;   /* купонные карточки         */
  --radius-xl:   28px;   /* большие promo-блоки       */
  --radius-pill: 999px;  /* CTA-кнопки                */

  /* ---------------------------------------------------------------------
     SHADOWS
     --------------------------------------------------------------------- */
  --shadow-1:     0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-2:     0 4px 16px rgba(15, 17, 21, 0.06);
  --shadow-3:     0 8px 32px rgba(15, 17, 21, 0.08);
  --shadow-cta:   0 6px 20px rgba(60, 173, 239, 0.32);
  --shadow-focus: 0 0 0 4px rgba(60, 173, 239, 0.24);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --ease-out:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   160ms;
  --duration-base:   240ms;
  --duration-slow:   320ms;

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad-d: 24px;
  --container-pad-m: 16px;
}

/* ---------------------------------------------------------------------
   SEMANTIC ELEMENT STYLES
   --------------------------------------------------------------------- */

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-strong);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-strong);
  font-weight: 600;
  font-size: var(--text-h4);
  line-height: 1.3;
  color: var(--fg-primary);
  margin: 0 0 var(--space-2);
}

p, .p {
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.small  { font-size: var(--text-small); line-height: var(--lh-normal); }
.micro  { font-size: var(--text-micro); line-height: var(--lh-normal); letter-spacing: 0.02em; }

.script {
  font-family: var(--font-script);
  font-weight: 500;
  color: var(--brand-blue-ink);
  font-size: 24px;
  line-height: 1.1;
}

.mono { font-family: var(--font-mono); }

a {
  color: var(--brand-blue);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--brand-blue-press); text-decoration: underline; }

.accent { color: var(--brand-blue); }

/* Mobile type scale */
@media (max-width: 768px) {
  :root {
    --text-h1:   36px;
    --text-h2:   28px;
    --text-h3:   22px;
    --text-h4:   18px;
    --text-stat: 40px;
  }
}