/* ============================================================
   Системный Администратор — Color tokens
   Brand: blue #0066B3 (primary / CTA), red #ED1C24 (accent only),
   1C yellow #FCC521 (1C-affiliation marker). Dark tech surfaces.
   ============================================================ */
:root {
  /* ---- Blue (primary, CTAs) ---- */
  --blue-50:  #E6F0F9;
  --blue-100: #CCE1F3;
  --blue-200: #99C2E6;
  --blue-300: #66A4DA;
  --blue-400: #3385CD;
  --blue-500: #0066B3; /* brand blue */
  --blue-600: #005A9E;
  --blue-700: #004C87;
  --blue-800: #003A68;
  --blue-900: #002847;

  /* ---- Red (accent only — never on primary CTAs) ---- */
  --red-50:  #FDEAEB;
  --red-100: #FBD2D3;
  --red-200: #F7A6A9;
  --red-300: #F3797D;
  --red-400: #F04C51;
  --red-500: #ED1C24; /* brand red */
  --red-600: #D1151D;
  --red-700: #A81117;
  --red-800: #7E0C11;
  --red-900: #55080B;

  /* ---- 1C yellow (affiliation marker) ---- */
  --yellow-1c-50:  #FFF8E1;
  --yellow-1c-100: #FFEEB3;
  --yellow-1c:     #FCC521; /* official 1C accent */
  --yellow-1c-600: #E5AC08;
  --yellow-1c-700: #B88700;

  /* ---- Slate neutrals ---- */
  --slate-50:  #F7F9FC;
  --slate-100: #EFF3F8;
  --slate-200: #E1E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #4A5A70;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ---- Ink (dark tech surfaces / hero) ---- */
  --ink-950: #060A12;
  --ink-900: #0A1322;
  --ink-850: #0E1A2E;
  --ink-800: #13223A;
  --ink-700: #1B2F4D;

  /* ---- White ---- */
  --white: #FFFFFF;

  /* =========================================================
     Semantic aliases
     ========================================================= */
  /* Actions */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-primary-soft:   var(--blue-50);
  --color-accent:         var(--red-500);
  --color-accent-hover:   var(--red-600);
  --color-accent-soft:    var(--red-50);
  --color-1c:             var(--yellow-1c);
  --color-1c-ink:         #2A1D00; /* text on yellow */

  /* Text */
  --text-strong:    var(--slate-900);
  --text-body:      var(--slate-700);
  --text-muted:     var(--slate-500);
  --text-on-dark:        #FFFFFF;
  --text-on-dark-soft:   rgba(255,255,255,0.72);
  --text-on-dark-muted:  rgba(255,255,255,0.52);
  --text-link:      var(--blue-600);

  /* Surfaces */
  --surface-page:    #FFFFFF;
  --surface-subtle:  var(--slate-50);
  --surface-muted:   var(--slate-100);
  --surface-card:    #FFFFFF;
  --surface-dark:    var(--ink-900);
  --surface-darker:  var(--ink-950);
  --surface-1c-soft: var(--yellow-1c-50);

  /* Borders & lines */
  --border:         var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-on-dark: rgba(255,255,255,0.12);
  --divider:        var(--slate-100);

  /* Focus / rings */
  --ring: 0 0 0 4px rgba(0,102,179,0.30);
  --ring-accent: 0 0 0 4px rgba(237,28,36,0.28);

  /* Status */
  --color-success: #1E9E5A;
  --color-success-soft: #E4F5EC;
  --color-warning: var(--yellow-1c-600);
  --color-warning-soft: var(--yellow-1c-50);
  --color-danger:  var(--red-600);
  --color-danger-soft: var(--red-50);

  /* Dark-hero accent glows */
  --glow-blue: radial-gradient(60% 60% at 70% 20%, rgba(0,102,179,0.35), transparent 70%); /* @kind color */
  --glow-red:  radial-gradient(50% 50% at 12% 90%, rgba(237,28,36,0.18), transparent 70%); /* @kind color */
}
/* ============================================================
   Системный Администратор — Typography tokens
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Manrope', 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body:    'Golos Text', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */
  --fw-extrabold:800; /* @kind other */

  /* ---- Fluid display / heading sizes ---- */
  --fs-display-1: clamp(2.75rem, 1.6rem + 4.6vw, 5rem); /* @kind other */     /* hero H1 */
  --fs-display-2: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); /* @kind other */
  --fs-h1:        clamp(2rem, 1.4rem + 2.4vw, 3rem); /* @kind other */
  --fs-h2:        clamp(1.65rem, 1.2rem + 1.8vw, 2.4rem); /* @kind other */
  --fs-h3:        clamp(1.3rem, 1.05rem + 1vw, 1.6rem); /* @kind other */
  --fs-h4:        clamp(1.125rem, 1rem + 0.5vw, 1.3rem); /* @kind other */
  --fs-lead:      clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem); /* @kind other */  /* hero subhead / lead */

  /* ---- Text sizes ---- */
  --fs-body:  1.0625rem; /* @kind other */  /* 17px */
  --fs-md:    1rem; /* @kind other */
  --fs-sm:    0.9375rem; /* @kind other */  /* 15px */
  --fs-xs:    0.8125rem; /* @kind other */  /* 13px */
  --fs-2xs:   0.6875rem; /* @kind other */  /* 11px — eyebrow caps */

  /* ---- Metric numerals (big stats) ---- */
  --fs-metric: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); /* @kind other */

  /* ---- Line heights ---- */
  --lh-tight:   1.04; /* @kind other */
  --lh-snug:    1.18; /* @kind other */
  --lh-heading: 1.12; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.66; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tighter: -0.03em; /* @kind other */
  --ls-tight:   -0.018em; /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-caps:    0.12em; /* @kind other */   /* eyebrows / overlines */
  --ls-caps-sm: 0.06em; /* @kind other */
}
/* ============================================================
   Системный Администратор — Spacing, radii, shadows, layout
   8px base rhythm; generous (premium, airy) section spacing.
   ============================================================ */
:root {
  /* ---- Spacing scale (4 / 8 base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-11:  6rem;     /* 96 */
  --space-12:  8rem;     /* 128 */

  /* Section vertical rhythm (premium / airy) */
  --section-y:    clamp(4.5rem, 3rem + 6vw, 8rem); /* @kind spacing */
  --section-y-sm: clamp(3rem, 2rem + 4vw, 5rem); /* @kind spacing */

  /* ---- Radii ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;   /* default card */
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --bw-1: 1px; /* @kind spacing */
  --bw-2: 2px; /* @kind spacing */

  /* ---- Shadows (soft, premium, cool-tinted) ---- */
  --shadow-xs:  0 1px 2px rgba(15,23,42,0.06);
  --shadow-sm:  0 2px 8px rgba(15,23,42,0.06);
  --shadow-md:  0 10px 28px -10px rgba(15,23,42,0.16);
  --shadow-lg:  0 24px 56px -20px rgba(15,23,42,0.22);
  --shadow-xl:  0 40px 90px -28px rgba(10,19,34,0.36);
  --shadow-blue: 0 18px 40px -16px rgba(0,102,179,0.45);
  --shadow-card-hover: 0 28px 60px -22px rgba(15,23,42,0.28);

  /* ---- Layout ---- */
  --container:      1240px; /* @kind spacing */
  --container-wide: 1400px; /* @kind spacing */
  --container-prose: 760px; /* @kind spacing */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); /* @kind spacing */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur:      220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* ---- Z-index ---- */
  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-header: 200; /* @kind other */
  --z-overlay: 800; /* @kind other */
  --z-modal: 900; /* @kind other */
  --z-toast: 1000; /* @kind other */
}
/* ============================================================
   Системный Администратор — Base element styles
   Minimal, token-driven reset + sensible defaults.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--color-primary-active); }

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

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: rgba(0,102,179,0.16); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

/* ---- Shared layout helper ---- */
.ds-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Eyebrow / overline ---- */
.ds-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

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