/* ==========================================================================
   Лингвич — design tokens
   Единственный файл, который нужно тронуть, чтобы перекрасить весь сайт.
   ========================================================================== */

:root {
  /* --- Brand -------------------------------------------------------------
     --brand-500 — точный фирменный синий из брендбука (#008CD2, снят
     пипеткой с логотипа). Остальные ступени построены вокруг него по
     светлоте, оттенок и насыщенность сохранены. Менять 500 без брендбука
     нельзя: это цвет знака. */
  --brand-50:  #EFF7FC;
  --brand-100: #D6EBF7;
  --brand-200: #A5D6EE;
  --brand-300: #5FBFE9;
  --brand-400: #1FA3DE;
  --brand-500: #008CD2;
  --brand-600: #0077B2;
  --brand-700: #005F8F;
  --brand-800: #004466;
  --brand-900: #002C42;

  /* --- Accent ------------------------------------------------------------
     Тёплый коралл — дополнение к азурному синему. Нужен, чтобы главная
     кнопка не сливалась с фирменным цветом, которым залито полсайта. */
  --accent-50:  #FDF0ED;
  --accent-100: #FBDED6;
  --accent-200: #F6BCAE;
  --accent-300: #F09983;
  --accent-400: #EA7B60;
  --accent-500: #E2543C;
  --accent-600: #C4402B;
  --accent-700: #9C3021;

  /* --- Neutrals ----------------------------------------------------------
     Холодновато-нейтральные: тёплая бумага рядом с азурным синим выглядит
     разнобоем. --ink совпадает с чёрным логотипа из брендбука. */
  --paper:      #FBFCFD;
  --paper-alt:  #F2F5F8;
  --sand:       #E6EBF0;
  --line:       #DCE3EA;
  --line-soft:  #E9EEF3;
  --surface:    #FFFFFF;
  --surface-2:  #F6F9FB;

  --ink:        #2B2B2B;
  --ink-2:      #45505A;
  --muted:      #6B7883;
  --muted-2:    #97A2AC;

  /* --- Status */
  --ok-bg:   #E4F6EE;  --ok:   #14795A;
  --warn-bg: #FDF3DE;  --warn: #92640B;
  --err-bg:  #FCEBEC;  --err:  #B4283A;
  --info-bg: #E7F3FB;  --info: #0A6394;

  /* --- Typography
     Officina Sans — фирменная гарнитура из брендбука, ею набран логотип.
     Держим её только на логотипе и крупных заголовках: в мелком тексте
     она хуже читается, чем системный гротеск. */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "OfficinaSansBlack", "OfficinaSansBold", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --step--2: clamp(0.71rem, 0.70rem + 0.05vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.88rem);
  --step-0:  clamp(0.97rem, 0.95rem + 0.12vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.10rem + 0.25vw, 1.32rem);
  --step-2:  clamp(1.38rem, 1.28rem + 0.48vw, 1.75rem);
  --step-3:  clamp(1.65rem, 1.47rem + 0.88vw, 2.35rem);
  --step-4:  clamp(1.98rem, 1.66rem + 1.55vw, 3.15rem);
  --step-5:  clamp(2.38rem, 1.83rem + 2.65vw, 4.25rem);

  /* --- Space (8pt) */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* --- Radii */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  /* --- Elevation */
  --sh-1: 0 1px 2px rgba(20, 30, 40, 0.05), 0 1px 3px rgba(20, 30, 40, 0.04);
  --sh-2: 0 2px 4px rgba(20, 30, 40, 0.04), 0 6px 16px -6px rgba(20, 30, 40, 0.10);
  --sh-3: 0 4px 8px rgba(20, 30, 40, 0.05), 0 16px 40px -12px rgba(20, 30, 40, 0.16);
  --sh-4: 0 8px 16px rgba(20, 30, 40, 0.06), 0 32px 64px -20px rgba(20, 30, 40, 0.22);
  --ring: 0 0 0 3px var(--brand-100);

  /* --- Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t-mid: 240ms;
  --t-slow: 420ms;

  /* --- Layout */
  --container: 1200px;
  --container-narrow: 780px;
  --header-h: 72px;
}

/* --- Dark theme ---------------------------------------------------------
   Не инверсия, а отдельная сборка. Фирменный синий на тёмном фоне слишком
   тёмен для текста, поэтому в тёмной теме рабочие ступени сдвинуты вверх —
   но сам знак остаётся #008CD2 в обеих темах, как требует брендбук. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #0E1418;
    --paper-alt: #121A20;
    --sand:      #18222A;
    --line:      #25323C;
    --line-soft: #1D2831;
    --surface:   #141D24;
    --surface-2: #1A242C;

    --ink:    #E9EFF3;
    --ink-2:  #C3D0D9;
    --muted:  #8B9BA7;
    --muted-2:#697A87;

    --brand-50:  #06283A;
    --brand-100: #08374F;
    --brand-200: #0B5279;
    --brand-300: #0F79AF;
    --brand-400: #1FA3DE;
    --brand-500: #3FB8EC;
    --brand-600: #6CCBF3;
    --brand-700: #9DDDF7;

    --accent-500: #F0755C;
    --accent-600: #E85F45;

    --ok-bg:   #0E2C22;  --ok:   #58D3A2;
    --warn-bg: #2E2413;  --warn: #E8B75A;
    --err-bg:  #2E1519;  --err:  #F08096;
    --info-bg: #0B2739;  --info: #6FBDEB;

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --sh-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
    --sh-3: 0 4px 8px rgba(0, 0, 0, 0.3), 0 16px 40px -12px rgba(0, 0, 0, 0.6);
    --sh-4: 0 8px 16px rgba(0, 0, 0, 0.35), 0 32px 64px -20px rgba(0, 0, 0, 0.7);
    --ring: 0 0 0 3px rgba(31, 163, 222, 0.35);
  }
}

/* Явный выбор темы переключателем — должен побеждать в обе стороны. */
:root[data-theme="dark"] {
  --paper:     #0E1418;
  --paper-alt: #121A20;
  --sand:      #18222A;
  --line:      #25323C;
  --line-soft: #1D2831;
  --surface:   #141D24;
  --surface-2: #1A242C;

  --ink:    #E9EFF3;
  --ink-2:  #C3D0D9;
  --muted:  #8B9BA7;
  --muted-2:#697A87;

  --brand-50:  #06283A;
  --brand-100: #08374F;
  --brand-200: #0B5279;
  --brand-300: #0F79AF;
  --brand-400: #1FA3DE;
  --brand-500: #3FB8EC;
  --brand-600: #6CCBF3;
  --brand-700: #9DDDF7;

  --accent-500: #F0755C;
  --accent-600: #E85F45;

  --ok-bg:   #0E2C22;  --ok:   #58D3A2;
  --warn-bg: #2E2413;  --warn: #E8B75A;
  --err-bg:  #2E1519;  --err:  #F08096;
  --info-bg: #0B2739;  --info: #6FBDEB;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  --sh-3: 0 4px 8px rgba(0, 0, 0, 0.3), 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --sh-4: 0 8px 16px rgba(0, 0, 0, 0.35), 0 32px 64px -20px rgba(0, 0, 0, 0.7);
  --ring: 0 0 0 3px rgba(31, 163, 222, 0.35);
}