/* ============================================================
   01Academy · Design Tokens
   Applied AI for Business — Porcelain / Deep Teal / Sage
   ------------------------------------------------------------
   Цветовая система из аудита B2B-позиционирования:

     База      porcelain   #F4F7F6   70–75%  ясность, доверие
     Контраст  deep teal   #122F34   15–20%  enterprise, технология
     Акцент    sage teal   #547C7E    7–10%  CTA, ROI, цифры, активное
     Системные neutral gray          остальное — подписи, разделители

   Страница не тёмная и не светлая целиком: светлые секции чередуются
   с графитовыми. Поэтому цвета объявлены не как «белый» и «чёрный», а
   как роли на текущей поверхности — --ink, --surface, --line. Секция
   с [data-theme="graphite"] переопределяет эти роли, и все компоненты
   внутри перекрашиваются сами, без единого дублирующего правила.
   ============================================================ */

:root {
  /* --- Палитра (сырые значения; в компонентах не используются) --- */
  --palette-warm-white: #f4f7f6;
  --palette-warm-white-2: #e8efed;
  --palette-graphite: #122f34;
  --palette-graphite-2: #19383d;
  --palette-graphite-3: #24464b;
  --palette-lime: #547c7e;
  --palette-lime-dim: #426668;
  --palette-sage: #8ea8a6;
  --palette-gray: #56676c;
  --palette-gray-light: #a8b9ba;
  --color-error: #d92d20;

  /* --- Роли на светлой поверхности (по умолчанию) --- */
  --surface: var(--palette-warm-white);
  --surface-2: #ffffff;          /* карточки — чуть светлее фона */
  --surface-3: var(--palette-warm-white-2); /* hover, вдавленные плашки */
  --ink: var(--palette-graphite); /* основной текст и «залитые» плашки */
  --ink-inverse: var(--palette-warm-white); /* текст поверх --ink */
  --ink-2: var(--palette-gray);   /* вторичный текст, лиды */
  --ink-3: #78898d;               /* подписи, метки, отключённое */
  --line: rgba(18, 47, 52, 0.13); /* волосяная линия */
  --line-strong: rgba(18, 47, 52, 0.26);

  /* Акцент одинаков в обеих темах: лайм читается и на белом, и на графите.
     На светлом фоне лайм как текст не проходит по контрасту, поэтому
     --accent-ink — то, чем пишут ПОВЕРХ лайма, а --accent-text — цвет
     самого акцентного текста на текущей поверхности. */
  --accent: var(--palette-lime);
  --accent-ink: #ffffff;
  --accent-text: #426668;
  --accent-soft: rgba(84, 124, 126, 0.14);

  /* Тени на светлом фоне мягкие и графитовые, а не чёрные: чистый чёрный
     на тёплом белом даёт грязный серый ореол. */
  --shadow-sm: 0 8px 24px rgba(18, 47, 52, 0.08);
  --shadow-md: 0 18px 44px rgba(18, 47, 52, 0.11);
  --shadow-lg: 0 30px 80px rgba(18, 47, 52, 0.16);
  --scrim: rgba(18, 47, 52, 0.58);

  color-scheme: light;
}

/* --- Роли на графитовой поверхности --- */
[data-theme="graphite"] {
  --surface: var(--palette-graphite);
  --surface-2: var(--palette-graphite-2);
  --surface-3: var(--palette-graphite-3);
  --ink: var(--palette-warm-white);
  --ink-inverse: var(--palette-graphite);
  --ink-2: var(--palette-gray-light);
  --ink-3: #80989a;
  --line: rgba(244, 247, 246, 0.14);
  --line-strong: rgba(244, 247, 246, 0.3);

  --accent: var(--palette-sage);
  --accent-ink: var(--palette-graphite);
  --accent-text: #b8cecb;
  --accent-soft: rgba(142, 168, 166, 0.14);
  --color-error: #ff7a70;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
  --scrim: rgba(0, 0, 0, 0.82);

  color-scheme: dark;
}

:root {
  /* --- Типографика ---
     'Neue Montreal' стоит первым: если купите лицензию и положите .woff2
     в assets/fonts/ со своим @font-face — он подхватится сам, без правок.
     Пока его нет, работает 'Golos Text' с Google Fonts: гротеск с полной
     кириллицей и похожим ритмом. Дальше — системный стек. */
  --font-neue-montreal: 'Neue Montreal', 'PP Neue Montreal', 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Моноширинный — для цифр в метриках и pipeline: колонки не пляшут. */
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Typography — Scale & Leading */
  --text-caption: 15px;
  --leading-caption: 1.2;
  --tracking-caption: 0.15px;

  --text-body-sm: 18px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.01em;

  --text-body: 20px;
  --leading-body: 1.2;
  --tracking-body: -0.2px;

  --text-body-lg: 22px;
  --leading-body-lg: 1.2;
  --tracking-body-lg: -0.22px;

  --text-heading-sm: 33px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.33px;

  --text-heading: 36px;
  --leading-heading: 1.5;
  --tracking-heading: -0.01em;

  --text-heading-lg: 56px;
  --leading-heading-lg: 1.13;
  --tracking-heading-lg: -0.56px;

  --text-display-sm: 105px;
  --leading-display-sm: 1.01;
  --tracking-display-sm: -2.1px;

  --text-display: 136px;
  --leading-display: 1;
  --tracking-display: -2.72px;

  /* Fluid typography clamps for responsive scaling */
  --fs-display: clamp(48px, 7.5vw, 136px);
  --fs-display-sm: clamp(38px, 6vw, 105px);
  --fs-h1: clamp(36px, 5.2vw, 56px);
  --fs-h2: clamp(28px, 3.8vw, 44px);
  --fs-h3: clamp(22px, 2.5vw, 33px);
  --fs-h4: clamp(18px, 1.8vw, 22px);
  --fs-lead: clamp(18px, 1.6vw, 22px);
  --fs-body: clamp(16px, 1.3vw, 20px);
  --fs-sm: 18px;
  --fs-xs: 15px;
  /* Крупная цифра результата: −52%, 15 минут, 3.6×. Доминанта секции. */
  --fs-metric: clamp(38px, 5vw, 72px);

  --lh-tight: 1.0;
  --lh-head: 1.05;
  --lh-body: 1.45;

  /* --- Spacing Scale --- */
  --spacing-unit: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-108: 108px;

  /* Layout */
  --page-max-width: 1440px;
  --wrap: 1440px;
  --wrap-narrow: 920px;
  --section-gap: clamp(72px, 6vw, 92px);
  --section-y: clamp(64px, 7.5vw, 108px);
  --gutter: clamp(20px, 4vw, 48px);

  /* --- Border Radius ---
     Названы по роли, а не по размеру: так видно, что радиус кнопок —
     осознанный ноль, а не забытое значение. */
  --radius-buttons: 8px;
  --radius-xs: 5px;
  --radius-nav: 7px;
  --radius-cards: 18px;
  --radius-tags: 9999px;

  /* --- Motion Philosophy --- */
  --ease: cubic-bezier(0.52, 0.01, 0, 1);
  --ease-vivid: cubic-bezier(0.52, 0.01, 0, 1);
  --ease-out: cubic-bezier(0.52, 0.01, 0, 1);
  --dur-fast: 0.25s;
  --dur: 0.5s;
  --dur-slow: 0.75s;

  /* --- Layers --- */
  --z-base: 1;
  --z-sticky: 40;
  --z-drawer: 45;
  --z-header: 50;
  --z-top: 70;

  /* --- Header Dimensions --- */
  --header-h: 84px;
  --header-h-shrunk: 68px;
}

@media (max-width: 880px) {
  :root {
    --header-h: 70px;
    --header-h-shrunk: 64px;
    --section-gap: 60px;
  }
}