/* ==========================================================================
   MicroAid — Design Tokens
   Direction: «Инженерная ясность» (Engineering clarity)
   --------------------------------------------------------------------------
   Спокойная уверенная техническая эстетика. Каркас и данные — на первом плане,
   украшения минимальны. Палитра и типографика задаются здесь и переиспользуются
   во всех компонентах. Кириллица поддерживается всеми шрифтами.
   ========================================================================== */

:root {
  /* --- Color: base --- */
  --paper:            #F7F8FA;   /* cold «paper» white — background            */
  --surface:          #FFFFFF;   /* cards / panels                             */
  --ink:              #0E1630;   /* deep blue-black, primary text              */
  --ink-soft:         #3A4356;   /* softer near-black for secondary emphasis   */
  --muted:            #5B6478;   /* secondary / captions                       */
  --line:             #E4E7EE;   /* thin technical rules / borders             */

  /* --- Color: accent --- */
  --primary:          #00A8E8;   /* electric cyan — brand accent               */
  --primary-ink:      #00658C;   /* darker cyan for hover/pressed              */
  --primary-tint:     #E3F5FD;   /* pale cyan wash for soft fills              */
  --accent:           var(--primary);      /* shared cyan accent                  */
  --accent-tint:      var(--primary-tint); /* shared pale cyan wash               */
  --win:              #0E7A4A;   /* positive / success                         */
  --warn:             #9C5F00;   /* caution (AA-contrast on white)             */

  /* --- Color: wordmark (взяты пипеткой из исходного логотипа) --- */
  --brand-ink:        #020B1F;   /* «Micro» в логотипе                          */
  --brand-cyan:       #0099FD;   /* «Aid» и голубая иконка логотипа             */

  /* --- Color: on-accent contrast helpers --- */
  --on-primary:       #062B3A;
  --on-primary-ink:   #FFFFFF;
  --on-accent:        var(--on-primary);

  /* --- Typography --- */
  --font-display: "Unbounded", system-ui, sans-serif;   /* заголовки */
  --font-body:    "Inter", system-ui, sans-serif;       /* текст / UI / данные */
  --font-brand:   "Poppins", system-ui, sans-serif;     /* wordmark «MicroAid.ru» */

  /* Fluid type scale (min / preferred / max) */
  --step--1: clamp(0.82rem, 0.78rem + 0.18vw, 0.95rem);
  --step-0:  clamp(0.97rem, 0.92rem + 0.24vw, 1.13rem);
  --step-1:  clamp(1.14rem, 1.06rem + 0.40vw, 1.50rem);
  --step-2:  clamp(1.32rem, 1.18rem + 0.70vw, 2.00rem);
  --step-3:  clamp(1.60rem, 1.36rem + 1.20vw, 2.70rem);
  --step-4:  clamp(1.95rem, 1.55rem + 2.00vw, 3.60rem);
  --step-5:  clamp(2.40rem, 1.78rem + 3.10vw, 4.80rem);

  /* Line-heights */
  --lh-tight: 1.08;
  --lh-body:  1.60;

  /* --- Spacing scale (4px base) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.50rem;
  --sp-3: 0.75rem;
  --sp-4: 1.00rem;
  --sp-5: 1.50rem;
  --sp-6: 2.25rem;
  --sp-7: 3.25rem;
  --sp-8: 5.00rem;
  --sp-9: 7.00rem;

  /* --- Layout --- */
  --container:      72rem;
  --container-wide: 82rem;
  --measure:        62ch;      /* line-length < 80 chars */
  --gutter:         clamp(1.25rem, 4vw, 3rem);
  --radius-sm:      0.5rem;
  --radius-md:      1.0rem;
  --radius-lg:      1.5rem;
  --radius-pill:    999rem;

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(14, 22, 48, 0.08);
  --shadow-md: 0 6px 24px -8px rgba(14, 22, 48, 0.18);
  --shadow-lg: 0 24px 48px -20px rgba(14, 22, 48, 0.28);
  --ring:      0 0 0 3px rgba(0, 168, 232, 0.32);

  /* --- Motion --- */
  --dur:     480ms;
  --dur-fast:180ms;
  --ease:    cubic-bezier(0.22, 0.7, 0.24, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
}

h1 { font-size: var(--step-5); font-weight: 700; }
h2 { font-size: var(--step-4); font-weight: 600; }
h3 { font-size: var(--step-3); font-weight: 600; }
h4 { font-size: var(--step-2); font-weight: 600; }
h5 { font-size: var(--step-1); font-weight: 600; }
h6 { font-size: var(--step-0); font-weight: 600; }

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--primary-ink); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }

img, svg { max-width: 100%; height: auto; display: block; }

/* Accessible keyboard focus */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--primary-tint); color: var(--ink); }

/* Containers */
.container {
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.container-wide {
  width: min(var(--container-wide), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.mx-auto { margin-inline: auto; }
.mx-fit  { width: min(var(--measure), 100%); }

/* Utility helpers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-muted { color: var(--muted); }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }

/* ==========================================================================
   Motion — respect user preference. One orchestrated reveal only.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}