/* Дизайн-система mthd.ru — тема «Тёплый графит» в переменных shadcn/ui (Tailwind CSS v4), 23.10.2026.
   Источник — «Дизайн-система mthd.ru.html» (выбор «Метода» в шаблоне «Выбор стиля»); цвета — те же, что у темы «Тёплый графит»
   в «Дизайн-система Метод — shadcn-ui.css». Руками не править — при изменении темы пересобрать (попросить Claude).

   Подключение
   1. Скопировать в проект на shadcn/ui под латинским именем, например mthd-theme.css:
      @import "tailwindcss";  …  @import "./mthd-theme.css";  — заменяет блоки :root, .dark и @theme inline.
   2. Шрифты (Павел 23.10.2026): заголовки — Manrope 700, текст — Golos Text 400–600; оба с кириллицей, OFL.
      Подключать со своего сервера (woff2, подмножества cyrillic и latin), для проверки — Google Fonts:
      https://fonts.googleapis.com/css2?family=Manrope:wght@600..800&family=Golos+Text:wght@400..700&display=swap
   3. Тёмная тема — по настройке устройства посетителя (prefers-color-scheme), без скрипта.
      Если на сайте будет переключатель: класс dark на <html> — тёмная, класс light — светлая, без класса — как в системе.

   Что поправить в компонентах shadcn/ui (токенами не задаётся)
   - Скругления: поля и кнопки 8 px (rounded-md), карточки и окна 10 px (rounded-lg, rounded-xl), плашки 6 px (rounded-sm).
   - Кнопка destructive: text-destructive-foreground вместо text-white.
   - Вторичная кнопка — контурная цвета фокуса: variant="outline" с классами border-ring text-ring.
   - Статусы всегда со значком и словом; цвет — только для сигналов. Цифры в таблицах — tabular-nums. */

:root {
  --radius: 0.625rem;
}

/* Тёплый графит — светлая */
:root {
  --background: #FBF9F6;
  --foreground: #2E2A27;
  --card: #FFFFFF;
  --card-foreground: #2E2A27;
  --popover: #FFFFFF;
  --popover-foreground: #2E2A27;
  --primary: #2E2A27;
  --primary-foreground: #FCFBF8;
  --secondary: #F3EFEA;
  --secondary-foreground: #2E2A27;
  --muted: #F3EFEA;
  --muted-foreground: #5E5853;
  --accent: #F3EFEA;
  --accent-foreground: #2E2A27;
  --destructive: #76281B;
  --destructive-foreground: #FFFFFF;
  --border: #E7E1DA;
  --input: #8A8886;
  --ring: #B84834;
  --chart-1: #2E2A27;
  --chart-2: #E4DDD3;
  --chart-3: #E4DDD3;
  --chart-4: #E4DDD3;
  --chart-5: #E4DDD3;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #2E2A27;
  --sidebar-primary: #2E2A27;
  --sidebar-primary-foreground: #FCFBF8;
  --sidebar-accent: #F3EFEA;
  --sidebar-accent-foreground: #2E2A27;
  --sidebar-border: #E7E1DA;
  --sidebar-ring: #B84834;
  /* свои */
  --primary-hover: #272321;
  --link: #A43F2D;
  --eyebrow: #B84834;
  --logo: #E2583E;
  --band: #F3EFEA;
  --hero: #FBF9F6;
  --highlight: #2E2A27;
  --highlight-foreground: #FCFBF8;
  --bars: #E4DDD3;
  --footer: #2E2A27;
  --footer-foreground: #FCFBF8;
  --success: #24613E;
  --success-soft: #E6F0EA;
  --warning: #8F3A06;
  --warning-soft: #F8EBE1;
  --info: #4A4541;
  --info-soft: #EEECEA;
  --destructive-soft: #F4E5E2;
}

/* Тёплый графит — тёмная: по настройке устройства и классом dark */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --background: #1D1A18;
    --foreground: #FAF8F6;
    --card: #282524;
    --card-foreground: #FAF8F6;
    --popover: #282524;
    --popover-foreground: #FAF8F6;
    --primary: #FAF8F6;
    --primary-foreground: #1D1A18;
    --secondary: #34312F;
    --secondary-foreground: #FAF8F6;
    --muted: #34312F;
    --muted-foreground: #AAA8A6;
    --accent: #34312F;
    --accent-foreground: #FAF8F6;
    --destructive: #F4A596;
    --destructive-foreground: #1D1A18;
    --border: #413F3D;
    --input: #9E9B9A;
    --ring: #D6958A;
    --chart-1: #FAF8F6;
    --chart-2: #63605F;
    --chart-3: #63605F;
    --chart-4: #63605F;
    --chart-5: #63605F;
    --sidebar: #282524;
    --sidebar-foreground: #FAF8F6;
    --sidebar-primary: #FAF8F6;
    --sidebar-primary-foreground: #1D1A18;
    --sidebar-accent: #34312F;
    --sidebar-accent-foreground: #FAF8F6;
    --sidebar-border: #413F3D;
    --sidebar-ring: #D6958A;
    /* свои */
    --primary-hover: #FDFCFB;
    --link: #D09D93;
    --eyebrow: #D6958A;
    --logo: #E2583E;
    --band: #3C3938;
    --hero: #1D1A18;
    --highlight: #FAF8F6;
    --highlight-foreground: #1D1A18;
    --bars: #63605F;
    --footer: #11100E;
    --footer-foreground: #FAF8F6;
    --success: #8FD3A8;
    --success-soft: #1D3327;
    --warning: #F2B57A;
    --warning-soft: #3A2A1C;
    --info: #D9D7D5;
    --info-soft: #34312F;
    --destructive-soft: #3D2320;
  }
}
.dark {
  --background: #1D1A18;
  --foreground: #FAF8F6;
  --card: #282524;
  --card-foreground: #FAF8F6;
  --popover: #282524;
  --popover-foreground: #FAF8F6;
  --primary: #FAF8F6;
  --primary-foreground: #1D1A18;
  --secondary: #34312F;
  --secondary-foreground: #FAF8F6;
  --muted: #34312F;
  --muted-foreground: #AAA8A6;
  --accent: #34312F;
  --accent-foreground: #FAF8F6;
  --destructive: #F4A596;
  --destructive-foreground: #1D1A18;
  --border: #413F3D;
  --input: #9E9B9A;
  --ring: #D6958A;
  --chart-1: #FAF8F6;
  --chart-2: #63605F;
  --chart-3: #63605F;
  --chart-4: #63605F;
  --chart-5: #63605F;
  --sidebar: #282524;
  --sidebar-foreground: #FAF8F6;
  --sidebar-primary: #FAF8F6;
  --sidebar-primary-foreground: #1D1A18;
  --sidebar-accent: #34312F;
  --sidebar-accent-foreground: #FAF8F6;
  --sidebar-border: #413F3D;
  --sidebar-ring: #D6958A;
  /* свои */
  --primary-hover: #FDFCFB;
  --link: #D09D93;
  --eyebrow: #D6958A;
  --logo: #E2583E;
  --band: #3C3938;
  --hero: #1D1A18;
  --highlight: #FAF8F6;
  --highlight-foreground: #1D1A18;
  --bars: #63605F;
  --footer: #11100E;
  --footer-foreground: #FAF8F6;
  --success: #8FD3A8;
  --success-soft: #1D3327;
  --warning: #F2B57A;
  --warning-soft: #3A2A1C;
  --info: #D9D7D5;
  --info-soft: #34312F;
  --destructive-soft: #3D2320;
}

/* Tailwind: классы bg-primary, text-muted-foreground, bg-success-soft, text-link и т. д. */
@theme inline {
  --font-sans: "Golos Text", Arial, sans-serif;
  --font-heading: "Manrope", "Golos Text", Arial, sans-serif;
  /* скругления по правилам листа: плашки 6, кнопки и поля 8, карточки и окна 10 */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: var(--radius);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-primary-hover: var(--primary-hover);
  --color-link: var(--link);
  --color-eyebrow: var(--eyebrow);
  --color-logo: var(--logo);
  --color-band: var(--band);
  --color-hero: var(--hero);
  --color-highlight: var(--highlight);
  --color-highlight-foreground: var(--highlight-foreground);
  --color-bars: var(--bars);
  --color-footer: var(--footer);
  --color-footer-foreground: var(--footer-foreground);
  --color-success: var(--success);
  --color-success-soft: var(--success-soft);
  --color-warning: var(--warning);
  --color-warning-soft: var(--warning-soft);
  --color-info: var(--info);
  --color-info-soft: var(--info-soft);
  --color-destructive-soft: var(--destructive-soft);
}

/* Заголовки — Manrope 700 */
@layer base {
  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
  }
}