/* Дальний Космос — токены дизайн-системы.
   Главный экземпляр: design-system/tokens.css. Копия для страницы: astronomy-homepage/dist/tokens.css (должна совпадать байт в байт).
   Три уровня: 1) палитра и шкалы → 2) роли (семантические токены) → 3) компоненты в site.css ссылаются только на роли.
   Светлая тема Blue and Gold — значения по умолчанию в :root; графитовая — :root[data-theme="graphite"]; ночная панель — локальная тема .dc-night.
   Брейкпоинты (в @media переменные не работают, значения пишутся числами): 360 · 760 · 900 · 1100 · 1280 · 1600; «низкий экран» — от 1101 и высота до 850. */

/* 1. Палитра */
:root {
  /* Светлая: бумага, туман, грифель, синий, песок, золото, умбра */
  --dc-white: #ffffff;
  --dc-paper: #fffefd;
  --dc-mist-50: #f7f8fb;
  --dc-mist-100: #f0f3f9;
  --dc-mist-200: #dfe4ec;
  --dc-mist-300: #bdcce0;
  --dc-slate-600: #626e80;
  --dc-navy-500: #426b98;
  --dc-navy-600: #345880;
  --dc-navy-700: #263e61;
  --dc-navy-800: #22334d;
  --dc-sand-50: #fffdf7;
  --dc-sand-100: #fbf3e5;
  --dc-sand-200: #e7dcc6;
  --dc-sand-400: #ccb37e;
  --dc-gold-400: #af8540;
  --dc-gold-600: #93682e;
  --dc-gold-700: #8b6027;
  --dc-umber-600: #7b6037;
  --dc-umber-800: #624d30;

  /* Графитовая: графит, сталь, шампань, бронза */
  --dc-graphite-950: #0b0e13;
  --dc-graphite-900: #14171c;
  --dc-graphite-850: #1b2028;
  --dc-graphite-800: #20262f;
  --dc-graphite-750: #2a323e;
  --dc-graphite-700: #343b46;
  --dc-graphite-600: #526075;
  --dc-graphite-500: #66768b;
  --dc-graphite-300: #adb7c5;
  --dc-graphite-100: #eaedf2;
  --dc-graphite-warm: #2a2822;
  --dc-steel-300: #afc4dd;
  --dc-champagne-100: #e2cea8;
  --dc-champagne-200: #dec595;
  --dc-champagne-300: #d5c3a4;
  --dc-bronze-500: #8e8066;
  --dc-bronze-700: #655b49;

  /* Ночная: глубокий синий и тёплое золото панели наблюдений и превью инструментов */
  --dc-night-950: #0b1526;
  --dc-night-900: #111c2c;
  --dc-night-850: #11243c;
  --dc-night-800: #213853;
  --dc-night-700: #263e5a;
  --dc-night-650: #344d6b;
  --dc-night-600: #466383;
  --dc-night-500: #5c7a9e;
  --dc-night-400: #7799c2;
  --dc-night-300: #97adc9;
  --dc-night-250: #afc0d5;
  --dc-night-200: #bdd5f3;
  --dc-night-100: #d8e7fb;
  --dc-night-75: #e3efff;
  --dc-night-50: #f0f4fc;
  --dc-night-gold-300: #f2cc8e;
  --dc-night-gold-500: #e9c084;
  --dc-night-gold-700: #d8b278;
  --dc-night-glow: #244467;
  --dc-night-overlay: #07101f;

  /* Цвета схем (Солнце и Луна в детском опыте) и туманности звёздного фона */
  --dc-sun: #d7ad52;
  --dc-moon-lit: #f4dfaa;
  --dc-atmosphere-cool: #688ab0;
  --dc-atmosphere-warm: #bca16e;
}

/* 2. Шкалы, общие для тем */
:root {
  /* Шрифт */
  --dc-font-family: "Manrope", Arial, sans-serif;
  --dc-weight-regular: 400;
  --dc-weight-medium: 500;
  --dc-weight-semibold: 600;
  --dc-weight-bold: 700;
  --dc-weight-extrabold: 800;

  /* Отступы */
  --dc-space-2: 2px;
  --dc-space-4: 4px;
  --dc-space-6: 6px;
  --dc-space-8: 8px;
  --dc-space-10: 10px;
  --dc-space-12: 12px;
  --dc-space-14: 14px;
  --dc-space-16: 16px;
  --dc-space-20: 20px;
  --dc-space-24: 24px;
  --dc-space-28: 28px;
  --dc-space-32: 32px;
  --dc-space-40: 40px;
  --dc-space-48: 48px;
  --dc-space-56: 56px;
  --dc-space-64: 64px;
  --dc-space-80: 80px;

  /* Скругления */
  --dc-radius-sm: 4px;
  --dc-radius-md: 6px;
  --dc-radius-lg: 8px;
  --dc-radius-pill: 999px;
  --dc-radius-round: 50%;

  /* Слои */
  --dc-z-below: -1;
  --dc-z-base: 0;
  --dc-z-raised: 1;
  --dc-z-raised-top: 2;
  --dc-z-nav: 20;
  --dc-z-rail: 45;
  --dc-z-header-menu: 59;
  --dc-z-header: 60;
  --dc-z-skip: 100;

  /* Движение */
  --dc-duration-fast: .15s;
  --dc-duration: .2s;
  --dc-duration-moderate: .25s;
  --dc-duration-slow: .6s;
  --dc-duration-hero: 1.1s;
  --dc-ease: ease;
  --dc-lift: -2px;
  --dc-card-lift: -4px;
  --dc-zoom: 1.04;

  /* Контейнер */
  --dc-container: 1320px;
  --dc-gutter: 48px;
  --dc-dialog-width: 780px;
  --dc-measure: 440px;

  /* Размеры элементов управления */
  --dc-control-min: 44px;
  --dc-button-height: 48px;
  --dc-icon-button: 40px;
  --dc-focus-width: 3px;
  --dc-focus-offset: 4px;
}

/* 3. Роли: светлая тема Blue and Gold (по умолчанию) */
:root {
  color-scheme: light;
  --dc-color-bg: var(--dc-paper);
  --dc-color-surface: var(--dc-mist-100);
  --dc-color-card: var(--dc-paper);
  --dc-color-control: var(--dc-paper);
  --dc-color-text: var(--dc-navy-800);
  --dc-color-text-muted: var(--dc-slate-600);
  --dc-color-text-warm: var(--dc-umber-600);
  --dc-color-accent: var(--dc-navy-600);
  --dc-color-accent-warm: var(--dc-gold-600);
  --dc-color-on-accent: var(--dc-white);
  --dc-color-on-photo: var(--dc-white);
  --dc-color-line: var(--dc-mist-200);
  --dc-color-line-strong: var(--dc-mist-300);
  --dc-color-line-input: var(--dc-mist-300);
  --dc-color-line-warm: var(--dc-sand-200);
  --dc-color-line-warm-strong: var(--dc-sand-400);
  --dc-color-tint-warm: var(--dc-sand-50);
  --dc-color-label-bg: color-mix(in srgb, var(--dc-sand-50) 93%, transparent);
  --dc-color-label-text: var(--dc-umber-800);
  --dc-color-label-border: transparent;
  --dc-color-chip-photo-bg: color-mix(in srgb, var(--dc-white) 95%, transparent);
  --dc-color-backdrop: color-mix(in srgb, #172641 50%, transparent);
  --dc-color-photo-shade: var(--dc-night-overlay);
  --dc-color-placeholder: var(--dc-night-850);
  --dc-color-moon-dark: var(--dc-navy-800);
  --dc-color-moon-edge: transparent;
  --dc-color-stars: #36567e;
  --dc-color-stars-warm: var(--dc-color-stars);
  --dc-color-stars-blue: var(--dc-color-stars);
  --dc-color-theme-meta: var(--dc-paper);
  --dc-shadow-color: color-mix(in srgb, #203453 12%, transparent);

  --dc-gradient-atmosphere-stops: var(--dc-sand-100), var(--dc-mist-50) 50%, var(--dc-mist-100);
  --dc-gradient-icon: linear-gradient(135deg, var(--dc-sand-100), var(--dc-mist-100));
  --dc-gradient-icon-hover: var(--dc-gradient-icon);
  --dc-gradient-accent-text: linear-gradient(115deg, var(--dc-gold-700), var(--dc-gold-400));
  --dc-gradient-hover-row: linear-gradient(105deg, var(--dc-mist-100), var(--dc-mist-50));

  --dc-button-primary-bg: linear-gradient(115deg, var(--dc-navy-700), var(--dc-navy-500));
  --dc-button-primary-bg-hover: var(--dc-button-primary-bg);
  --dc-button-primary-text: var(--dc-white);
  --dc-button-primary-border: transparent;
  --dc-button-primary-border-hover: transparent;
  --dc-button-primary-filter-hover: brightness(.93);
  --dc-button-secondary-bg: var(--dc-paper);
  --dc-button-photo-bg: var(--dc-button-primary-bg);
  --dc-button-photo-bg-hover: var(--dc-button-primary-bg);
  --dc-button-photo-blur: none;

  --dc-focus-color: var(--dc-color-accent);
  --dc-background-strength: .9;
  /* Параметры владельца 22.10.2026. Доли — проценты от всех звёзд. */
  --dc-stars-density: 50;
  --dc-stars-bright-share: 10;
  --dc-stars-warm-share: 30;
  --dc-stars-blue-share: 20;
  --dc-stars-bright-size: 1.4;
  --dc-stars-low-mul: .6;
  --dc-stars-peak-mul: 1.4;
  --dc-stars-speed: 1;
  --dc-stars-solid-core: 80%;
  /* Метеоры через весь экран (background.js читает перед каждым запуском). --dc-meteors: 0 — выключить. */
  --dc-meteors: 1;
  --dc-meteor-interval-min: 13s;
  --dc-meteor-interval-max: 20s;
  --dc-meteor-duration: 4.5s;
  --dc-meteor-length: 260px;
  --dc-meteor-width: 1.5px;
  --dc-meteor-opacity: .85;
  --dc-meteor-duration-spread: .25; /* разброс времени пролёта ±25% */
  --dc-meteor-angle: 25;            /* наибольший наклон пути, градусы */
  --dc-meteor-thicken: 2;           /* во сколько раз метеор утолщается к пику */
  --dc-meteor-saturation: .7;       /* насыщенность цвета: 0 — белые, 1 — полный цвет */
  --dc-meteor-fireball-chance: .15; /* доля болидов: ярче, толще, со вспышкой и следом */
  --dc-meteor-flare: 1.6;           /* сила вспышки болида */
  --dc-meteor-train: 2.5s;          /* сколько светится след болида; 0 — без следа */
}

/* 4. Роли: графитовая тема (по умолчанию для новых посетителей) */
:root[data-theme="graphite"] {
  color-scheme: dark;
  --dc-color-bg: var(--dc-graphite-900);
  --dc-color-surface: var(--dc-graphite-800);
  --dc-color-card: var(--dc-graphite-850);
  --dc-color-control: var(--dc-graphite-750);
  --dc-color-text: var(--dc-graphite-100);
  --dc-color-text-muted: var(--dc-graphite-300);
  --dc-color-text-warm: var(--dc-champagne-300);
  --dc-color-accent: var(--dc-steel-300);
  --dc-color-accent-warm: var(--dc-champagne-200);
  --dc-color-on-accent: var(--dc-graphite-900);
  --dc-color-line: var(--dc-graphite-700);
  --dc-color-line-strong: var(--dc-graphite-600);
  --dc-color-line-input: var(--dc-graphite-500);
  --dc-color-line-warm: var(--dc-bronze-700);
  --dc-color-line-warm-strong: var(--dc-bronze-500);
  --dc-color-tint-warm: var(--dc-graphite-warm);
  --dc-color-label-bg: color-mix(in srgb, var(--dc-graphite-850) 93%, transparent);
  --dc-color-label-text: var(--dc-champagne-100);
  --dc-color-label-border: var(--dc-bronze-500);
  --dc-color-chip-photo-bg: color-mix(in srgb, var(--dc-graphite-850) 92%, transparent);
  --dc-color-backdrop: color-mix(in srgb, #05080c 75%, transparent);
  --dc-color-moon-dark: var(--dc-graphite-950);
  --dc-color-moon-edge: var(--dc-graphite-500);
  --dc-color-stars: #f0f6ff;
  --dc-color-stars-warm: #ffd175;
  --dc-color-stars-blue: #9bcfff;
  --dc-color-theme-meta: var(--dc-graphite-900);
  --dc-shadow-color: color-mix(in srgb, #000 45%, transparent);

  --dc-gradient-atmosphere-stops: var(--dc-graphite-warm), var(--dc-graphite-800);
  --dc-gradient-icon: linear-gradient(var(--dc-graphite-800), var(--dc-graphite-800));
  --dc-gradient-icon-hover: linear-gradient(var(--dc-graphite-warm), var(--dc-graphite-warm));
  --dc-gradient-accent-text: linear-gradient(var(--dc-champagne-200), var(--dc-champagne-200));
  --dc-gradient-hover-row: linear-gradient(105deg, var(--dc-graphite-800), var(--dc-graphite-850));

  --dc-button-primary-bg: transparent;
  --dc-button-primary-bg-hover: color-mix(in srgb, var(--dc-champagne-200) 5%, transparent);
  --dc-button-primary-text: var(--dc-champagne-200);
  --dc-button-primary-border: var(--dc-bronze-500);
  --dc-button-primary-border-hover: var(--dc-champagne-200);
  --dc-button-primary-filter-hover: none;
  --dc-button-secondary-bg: transparent;
  --dc-button-photo-bg: color-mix(in srgb, var(--dc-night-overlay) 70%, transparent);
  --dc-button-photo-bg-hover: color-mix(in srgb, var(--dc-night-overlay) 88%, transparent);
  --dc-button-photo-blur: blur(6px);
}
:root[data-theme="light"] {
  color-scheme: light;
}

/* 5. Локальная ночная тема: панель наблюдений и превью инструментов в обеих темах сайта */
.dc-night {
  --dc-color-bg: var(--dc-night-950);
  --dc-color-surface: var(--dc-night-800);
  --dc-color-card: var(--dc-night-900);
  --dc-color-text: var(--dc-night-50);
  --dc-color-text-muted: var(--dc-night-250);
  --dc-color-text-soft: var(--dc-night-100);
  --dc-color-text-faint: var(--dc-night-300);
  --dc-color-accent: var(--dc-night-200);
  --dc-color-accent-warm: var(--dc-night-gold-500);
  --dc-color-accent-warm-soft: var(--dc-night-gold-300);
  --dc-color-line: var(--dc-night-650);
  --dc-color-line-strong: var(--dc-night-600);
  --dc-color-line-soft: var(--dc-night-500);
  --dc-color-line-faint: var(--dc-night-400);
  --dc-color-edge: var(--dc-night-800);
  --dc-color-control-hover: var(--dc-night-700);
  --dc-color-star: var(--dc-night-75);
  --dc-color-star-warm: var(--dc-night-gold-500);
  --dc-color-star-outline: var(--dc-night-850);
  --dc-color-accent-warm-deep: var(--dc-night-gold-700);
  --dc-gradient-night-sky: radial-gradient(ellipse at 83% 44%, color-mix(in srgb, var(--dc-night-glow) 55%, transparent), transparent 61%), linear-gradient(110deg, var(--dc-night-950) 8%, var(--dc-night-900) 62%, var(--dc-night-850));
  --dc-focus-color: var(--dc-night-gold-300);
}
@media (max-width: 760px) {
  .dc-night {
    --dc-gradient-night-sky: radial-gradient(ellipse at 55% 78%, color-mix(in srgb, var(--dc-night-glow) 55%, transparent), transparent 55%), linear-gradient(165deg, var(--dc-night-950), var(--dc-night-850));
  }
}

/* 6. Текстовые стили по ролям: размер, интерлиньяж, трекинг, насыщенность */
:root {
  --dc-type-display-size: clamp(2rem, calc((min(1320px, 100vw - 96px) * .43 - 44px) / 12.4), 4.125rem);
  --dc-type-display-line: 1.08;
  --dc-type-display-tracking: -.033em;
  --dc-type-display-weight: 500;

  --dc-type-heading-promo-size: 44px;
  --dc-type-heading-promo-line: 1.2;
  --dc-type-heading-promo-tracking: -1.1px;
  --dc-type-heading-promo-weight: 500;

  --dc-type-heading-section-size: 33px;
  --dc-type-heading-section-line: 1.2;
  --dc-type-heading-section-tracking: -1.1px;
  --dc-type-heading-section-weight: 500;

  --dc-type-heading-sub-size: 28px;
  --dc-type-heading-sub-line: 1.3;
  --dc-type-heading-sub-tracking: -.6px;
  --dc-type-heading-sub-weight: 500;

  --dc-type-heading-card-lg-size: 24px;
  --dc-type-heading-card-lg-line: 1.3;
  --dc-type-heading-card-lg-tracking: -.6px;
  --dc-type-heading-card-lg-weight: 600;

  --dc-type-heading-card-size: 20px;
  --dc-type-heading-card-line: 1.4;
  --dc-type-heading-card-tracking: -.4px;
  --dc-type-heading-card-weight: 600;

  --dc-type-title-size: 17px;
  --dc-type-title-line: 1.4;
  --dc-type-title-tracking: -.2px;
  --dc-type-title-weight: 600;

  --dc-type-lead-size: 20px;
  --dc-type-lead-line: 1.4;
  --dc-type-lead-tracking: -.3px;
  --dc-type-lead-weight: 600;

  --dc-type-text-size: 16px;
  --dc-type-text-line: 1.7;

  --dc-type-text-sm-size: 14px;
  --dc-type-text-sm-line: 1.6;

  --dc-type-ui-lg-size: 15px;
  --dc-type-ui-size: 14px;
  --dc-type-ui-sm-size: 13px;
  --dc-type-ui-line: 1.5;

  --dc-type-overline-size: 12px;
  --dc-type-overline-line: 1.5;
  --dc-type-overline-tracking: 1.55px;
  --dc-type-overline-weight: 700;

  --dc-type-caption-size: 12px;
  --dc-type-caption-line: 1.5;

  --dc-type-micro-size: 11px;
  --dc-type-micro-line: 1.35;
  --dc-type-micro-tracking: .8px;

  --dc-type-numeral-size: 90px;
  --dc-type-numeral-line: .95;
  --dc-type-numeral-tracking: -6px;
}

/* 7. Адаптивные значения ролей и раскладки */
:root {
  --dc-section-space: 80px;
  --dc-section-head-space: 32px;
  --dc-grid-gap: 24px;
  --dc-card-pad: 32px;
  --dc-card-pad-inline: 32px;
  --dc-card-body-pad: 20px;
  --dc-panel-pad: 48px;
  --dc-dialog-pad: 48px;
  --dc-dialog-pad-inline: 48px;
}
@media (min-width: 1600px) {
  :root {
    --dc-container: 1380px;
    --dc-gutter: 70px;
    --dc-type-display-size: clamp(2rem, calc((min(1380px, 100vw - 140px) * .43 - 44px) / 12.4), 4.125rem);
  }
}
@media (max-width: 1280px) {
  :root {
    --dc-type-lead-size: 18px;
    --dc-panel-pad: 40px;
  }
}
@media (max-width: 1100px) {
  :root {
    --dc-container: 100%;
    --dc-gutter: 32px;
    --dc-type-display-size: clamp(1.75rem, calc(((100vw - 64px) * .43 - 26px) / 12.4), 3.25rem);
    --dc-type-heading-promo-size: 40px;
    --dc-type-heading-card-lg-size: 22px;
    --dc-type-heading-card-size: 18px;
    --dc-type-lead-size: 17px;
    --dc-type-numeral-size: 78px;
    --dc-grid-gap: 20px;
    --dc-card-pad: 24px;
    --dc-card-pad-inline: 24px;
    --dc-card-body-pad: 16px;
  }
}
@media (max-width: 900px) {
  :root {
    --dc-panel-pad: 32px;
  }
}
@media (max-width: 760px) {
  :root {
    --dc-gutter: 10px;
    --dc-type-display-size: clamp(2.25rem, 10vw, 3rem);
    --dc-type-heading-promo-size: 36px;
    --dc-type-heading-section-size: 28px;
    --dc-type-heading-sub-size: 24px;
    --dc-type-numeral-size: 64px;
    --dc-type-numeral-tracking: -4px;
    --dc-section-space: 56px;
    --dc-section-head-space: 24px;
    --dc-grid-gap: 24px;
    --dc-card-pad: 24px;
    --dc-card-pad-inline: 20px;
    --dc-card-body-pad: 20px;
    --dc-panel-pad: 24px;
    --dc-dialog-pad: 32px;
    --dc-dialog-pad-inline: 20px;
  }
}
@media (max-width: 360px) {
  :root {
    --dc-type-numeral-size: 60px;
  }
}