/* ==========================================================================
   01-scientist — base.css
   Токены темы, reset, типографика, базовые элементы
   ========================================================================== */

:root {
  /* --- Палитра: космическая тёмно-синяя тема (по умолчанию) --- */
  --bg:            #0A0E28;   /* базовый фон: глубокий тёмно-синий */
  --bg-deep:       #070A1E;   /* нижняя точка градиента */
  --glow-violet:   #2A1B54;   /* фиолетовое свечение */
  --glow-teal:     #103A50;   /* холодное свечение-противоакцент */

  --surface:       #131A3D;   /* карточки, панели */
  --surface-2:     #171E48;   /* вторичная поверхность */
  --border:        rgba(160, 175, 255, .16);
  --border-strong: rgba(170, 185, 255, .3);

  --text:          #EFF2FF;   /* основной текст */
  --text-muted:    #A9B2DA;   /* второстепенный текст */

  --accent:        #A78BFA;   /* акцент: светлая сирень */
  --accent-hover:  #C4B0FF;
  --accent-soft:   rgba(167, 139, 250, .16);
  --accent-ring:   rgba(167, 139, 250, .45);
  --on-accent:     #150F2E;   /* текст на акцентной плашке */

  --amber:         #F2C57C;   /* вспомогательный «метка/год» */
  --danger:        #FF8F7A;   /* ошибки формы */

  /* --- Радиусы --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-full: 999px;

  /* --- Тени --- */
  --shadow-sm: 0 1px 2px rgba(3, 6, 22, .5);
  --shadow-md: 0 10px 24px -12px rgba(2, 4, 18, .75);
  --shadow-lg: 0 26px 54px -26px rgba(1, 2, 12, .9);

  /* --- Шкала отступов (кратна 4) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* --- Типографика --- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:   0.78rem;   /* 12.5 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  --fs-2xl:  clamp(2rem, 1.3rem + 3.2vw, 3.4rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  --container: 1120px;
  --header-h: 68px;

  --t-fast: .16s ease;
  --t-base: .24s cubic-bezier(.2, .7, .3, 1);
}

/* --- Тема "space" (значение по умолчанию): базовый космический фон.
       Отдельный селектор-алиас, чтобы тема работала, даже если токены
       :root переопределены, и явно фиксировал космическую палитру. --- */
:root[data-theme="space"] {
  --bg:            #0A0E28;
  --bg-deep:       #070A1E;
  --glow-violet:   #2A1B54;
  --glow-teal:     #103A50;

  --surface:       #131A3D;
  --surface-2:     #171E48;
  --border:        rgba(160, 175, 255, .16);
  --border-strong: rgba(170, 185, 255, .3);

  --text:          #EFF2FF;
  --text-muted:    #A9B2DA;

  --accent:        #A78BFA;
  --accent-hover:  #C4B0FF;
  --accent-soft:   rgba(167, 139, 250, .16);
  --accent-ring:   rgba(167, 139, 250, .45);
  --on-accent:     #150F2E;

  --amber:         #F2C57C;
  --danger:        #FF8F7A;

  --shadow-sm: 0 1px 2px rgba(3, 6, 22, .5);
  --shadow-md: 0 10px 24px -12px rgba(2, 4, 18, .75);
  --shadow-lg: 0 26px 54px -26px rgba(1, 2, 12, .9);
}

/* --- Ещё более тёмный вариант звёздного фона --- */
:root[data-theme="dark"] {
  --bg:            #05071A;
  --bg-deep:       #03040F;
  --glow-violet:   #1E1240;
  --glow-teal:     #0A2A3C;

  --surface:       #0E1435;
  --surface-2:     #121942;
  --border:        rgba(160, 175, 255, .14);
  --border-strong: rgba(170, 185, 255, .26);

  --text:          #EDF1FF;
  --text-muted:    #A2ABD4;

  --accent:        #B49BFF;
  --accent-hover:  #CDBDFF;
  --accent-soft:   rgba(180, 155, 255, .15);
  --accent-ring:   rgba(180, 155, 255, .42);
  --on-accent:     #120C28;

  --amber:         #F0C079;
  --danger:        #FF8F7A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .55);
  --shadow-md: 0 10px 26px -12px rgba(0, 0, 0, .8);
  --shadow-lg: 0 28px 58px -28px rgba(0, 0, 0, .9);
}

/* --- Светлый режим (включается кнопкой солнца в шапке) --- */
:root[data-theme="light"] {
  --bg:            #F7F8F6;
  --bg-deep:       #F1F3F0;
  --glow-violet:   #E9E2FA;
  --glow-teal:     #E1F0ED;

  --surface:       #FFFFFF;
  --surface-2:     #F1F3F0;
  --border:        #E3E6E1;
  --border-strong: #D2D7D1;

  --text:          #16201E;
  --text-muted:    #5C6764;

  --accent:        #0E7C6B;
  --accent-hover:  #0A6355;
  --accent-soft:   #E4F2EF;
  --accent-ring:   rgba(14, 124, 107, .35);
  --on-accent:     #FFFFFF;

  --amber:         #B4762A;
  --danger:        #B4462F;

  --shadow-sm: 0 1px 2px rgba(16, 32, 30, .06);
  --shadow-md: 0 6px 18px -8px rgba(16, 32, 30, .18);
  --shadow-lg: 0 20px 44px -20px rgba(16, 32, 30, .28);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  /* Космический фон: тёмно-синяя основа + фиолетовые свечения + звёздный узор */
  background-color: var(--bg);
  background-image:
    linear-gradient(160deg, var(--bg) 0%, var(--bg-deep) 100%),
    radial-gradient(1150px 640px at 12% -8%, var(--glow-violet), transparent 62%),
    radial-gradient(900px 520px at 94% 6%, var(--glow-teal), transparent 60%),
    radial-gradient(1250px 720px at 50% 106%, var(--glow-violet), transparent 66%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440'%3E%3Cg fill='%23E8EDFF'%3E%3Ccircle cx='38' cy='52' r='1.5' fill-opacity='.6'/%3E%3Ccircle cx='168' cy='26' r='1' fill-opacity='.45'/%3E%3Ccircle cx='292' cy='74' r='1.7' fill-opacity='.65'/%3E%3Ccircle cx='404' cy='38' r='1' fill-opacity='.4'/%3E%3Ccircle cx='96' cy='186' r='1.2' fill-opacity='.5'/%3E%3Ccircle cx='248' cy='158' r='1.5' fill-opacity='.55'/%3E%3Ccircle cx='392' cy='208' r='1' fill-opacity='.4'/%3E%3Ccircle cx='28' cy='318' r='1.4' fill-opacity='.5'/%3E%3Ccircle cx='176' cy='344' r='1' fill-opacity='.4'/%3E%3Ccircle cx='302' cy='296' r='1.6' fill-opacity='.6'/%3E%3Ccircle cx='418' cy='382' r='1.1' fill-opacity='.45'/%3E%3Ccircle cx='128' cy='424' r='1.3' fill-opacity='.5'/%3E%3Ccircle cx='268' cy='248' r='2.4' fill-opacity='.85'/%3E%3Ccircle cx='62' cy='108' r='2.1' fill-opacity='.8'/%3E%3Ccircle cx='352' cy='424' r='2.2' fill-opacity='.75'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='276' height='276'%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='34' cy='40' r='.9' fill-opacity='.4'/%3E%3Ccircle cx='138' cy='18' r='1.2' fill-opacity='.5'/%3E%3Ccircle cx='228' cy='62' r='.8' fill-opacity='.35'/%3E%3Ccircle cx='86' cy='128' r='1' fill-opacity='.45'/%3E%3Ccircle cx='206' cy='164' r='1.3' fill-opacity='.5'/%3E%3Ccircle cx='22' cy='214' r='.9' fill-opacity='.4'/%3E%3Ccircle cx='152' cy='244' r='1.1' fill-opacity='.45'/%3E%3Ccircle cx='262' cy='214' r='.8' fill-opacity='.35'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23DCE4FF'%3E%3Ccircle cx='22' cy='26' r='.7' fill-opacity='.3'/%3E%3Ccircle cx='94' cy='14' r='.6' fill-opacity='.25'/%3E%3Ccircle cx='140' cy='72' r='.7' fill-opacity='.3'/%3E%3Ccircle cx='54' cy='96' r='.6' fill-opacity='.25'/%3E%3Ccircle cx='118' cy='134' r='.7' fill-opacity='.3'/%3E%3Ccircle cx='20' cy='140' r='.6' fill-opacity='.25'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
  background-position: left top, left top, right top, center bottom, left top, left top, left top;
  background-size: cover, auto, auto, auto, 440px 440px, 276px 276px, 160px 160px;
  background-attachment: fixed;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  font-weight: 650;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

button { font: inherit; color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* --- Фокус --- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-soft); color: var(--text); }

/* --- Кнопки --- */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 20px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-bd: var(--accent);
}
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); color: var(--btn-fg); }

.btn--ghost { --btn-bg: transparent; --btn-bd: var(--border-strong); }
.btn--ghost:hover { --btn-bg: var(--surface); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--sm { padding: 9px 14px; font-size: var(--fs-xs); }

/* --- Утилиты --- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.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;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top var(--t-base);
}
.skip-link:focus { top: var(--s-4); color: var(--on-accent); text-decoration: none; }

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