/* presets.css — шесть дизайн-миров. Подключается ПОСЛЕ tokens.css.
 *
 * Зачем: аудит 21.08.2026 показал, что slgo.ai, slmarketing.ae и domeco.ae —
 * это один и тот же сайт в трёх покрасках: одинаковый скелет hero, один шрифт,
 * один и тот же ритм. Причина в том, что «направление» было словом в брифе,
 * а не набором значений.
 *
 * Здесь направление — это физически разные шрифты, радиусы, тени, ритм и
 * характер движения. Собрать два одинаковых сайта на разных пресетах не выйдет.
 *
 * Применение:  <html data-direction="dark-cinematic">
 * Шрифты подключать соответствующей строкой из шапки каждого блока.
 *
 * Значения не выдуманы: сняты с разборов живых эталонов (refero.design) —
 * Rivian, Altius, Dash Digital, Freitag, Linear.
 */

/* ═══════════════════════════════════════════════════════════════
   1. EDITORIAL — журнальный разворот
   Для: slmedia (кейсы, шоурил), личный бренд, портфолио, контент.
   Метафора-ориентир: «музей на тёплой бумаге, гигантская лёгкая типографика
   плывёт над стенами цвета небелёного холста».
   Сигнатура направления: колонки разной ширины + подписи на полях + номера.

   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&display=swap" rel="stylesheet">
   <link href="https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════════ */
[data-direction="editorial"] {
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-text: "Satoshi", system-ui, sans-serif;
  --weight-display: 300;               /* дисплейный serif работает тонким */

  --color-bg: oklch(96.5% 0.008 85);   /* небелёная бумага, не белый */
  --color-surface: oklch(93.5% 0.011 85);
  --color-elevated: oklch(99% 0.004 85);
  --color-text: oklch(21% 0.014 60);   /* тёплые чернила, не чёрный */
  --color-muted: oklch(48% 0.02 60);
  --color-hairline: oklch(21% 0.014 60 / 0.16);
  --color-accent: oklch(51% 0.16 28);  /* киноварь корректорского карандаша */
  --color-accent-hover: oklch(45% 0.17 28);
  --color-on-accent: oklch(97% 0.008 85);

  --radius-xs: 0px;                    /* editorial = печать, углы прямые */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-pill: 999px;                /* только у меток и кнопок */

  --lh-hero: 0.92;
  --track-hero: -0.022em;
  --measure: 66ch;
  --dur-reveal: 900ms;                 /* журнал листают неспешно */
  --reveal-shift: 34px;
}
/* Тени в печати не бывает: разделяем воздухом и волосяной линией. */
[data-direction="editorial"] :is(.card, .surface) { box-shadow: none; border-block-start: 1px solid var(--color-hairline); }

/* ═══════════════════════════════════════════════════════════════
   2. NEO-BRUTALISM — честный блок
   Для: slgo.ai (продукты, тулзы), tech, смелые клиенты.
   Метафора-ориентир: «распечатанный интерфейс, приклеенный скотчем к стене».
   Сигнатура: жёсткая смещённая тень, толстый бордер, отсутствие полутонов.

   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════════ */
[data-direction="brutalist"] {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-text: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --weight-display: 800;

  --color-bg: oklch(97% 0.02 95);      /* не белый — выцветшая бумага */
  --color-surface: oklch(100% 0 0);
  --color-elevated: oklch(100% 0 0);
  --color-text: oklch(12% 0 0);
  --color-muted: oklch(40% 0 0);
  --color-hairline: oklch(12% 0 0);    /* линия всегда чёрная и толстая */
  --color-accent: oklch(72% 0.21 135); /* кислотный лайм */
  --color-accent-hover: oklch(66% 0.22 135);
  --color-on-accent: oklch(12% 0 0);

  --radius-xs: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 0px;

  --border-heavy: 2.5px solid var(--color-hairline);
  --elev-1: 4px 4px 0 var(--color-hairline);
  --elev-2: 7px 7px 0 var(--color-hairline);
  --elev-3: 11px 11px 0 var(--color-hairline);

  --lh-hero: 0.86;
  --track-hero: -0.03em;
  --dur-reveal: 380ms;                 /* резкое, без плавности */
  --dur-micro: 90ms;
  --ease-out-expo: cubic-bezier(0.2, 0.9, 0.3, 1);
  --reveal-shift: 16px;
}
[data-direction="brutalist"] :is(.card, .surface, button, .btn) { border: var(--border-heavy); box-shadow: var(--elev-1); }
[data-direction="brutalist"] :is(button, .btn):hover { transform: translate(-2px, -2px); box-shadow: var(--elev-2); }
[data-direction="brutalist"] :is(button, .btn):active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--color-hairline); }

/* ═══════════════════════════════════════════════════════════════
   3. DARK CINEMATIC — свет в темноте
   Для: SL Real Estate, slmedia luxury/CGI, премиум-услуги.
   Метафора-ориентир: «частный показ после полуночи — одна тёплая лампа
   в неосвещённом зале» (снято с Sequel и Altius).
   Сигнатура: внутреннее свечение у краёв, волосяные линии ловят свет,
   секции чередуются по температуре — тёмная, тёмная, светлая вставка.

   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
   <link href="https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════════ */
[data-direction="dark-cinematic"] {
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-text: "General Sans", system-ui, sans-serif;
  --weight-display: 400;

  --color-bg: oklch(14% 0.012 40);     /* обсидиан с теплом, не #000 */
  --color-surface: oklch(18% 0.016 40);
  --color-elevated: oklch(22% 0.02 40);
  --color-text: oklch(95% 0.008 60);
  --color-muted: oklch(66% 0.014 50);
  --color-hairline: oklch(95% 0.008 60 / 0.14);
  --color-accent: oklch(76% 0.13 72);  /* латунь / тёплый янтарь */
  --color-accent-hover: oklch(82% 0.14 72);
  --color-on-accent: oklch(14% 0.012 40);
  --shadow-color: oklch(4% 0.01 40);

  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 20px;

  --lh-hero: 0.95;
  --track-hero: -0.015em;
  --dur-reveal: 1100ms;                /* кино не торопится */
  --dur-scene: 1600ms;
  --reveal-shift: 40px;
  --grain-opacity: 0.05;
  --vignette: 0.42;
}
/* Свечение изнутри вместо тени снаружи — ключевой приём направления. */
[data-direction="dark-cinematic"] :is(.card, .surface) {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 24px 60px -30px var(--shadow-color);
}
[data-direction="dark-cinematic"] .btn-primary {
  box-shadow: inset 0 0 20px oklch(76% 0.13 72 / 0.28), 0 0 0 1px var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════
   4. SWISS — информация как дизайн
   Для: B2B, клиники, агентские страницы, документные продукты.
   Метафора-ориентир: «печатный манифест на поточном бетоне: сетка видна,
   цвет один, всё держится на весе и размере» (снято с Freitag и Rivian).
   Сигнатура: видимая колоночная разлиновка + гигантский заголовок как
   архитектура + ровно один сигнальный цвет на экран.

   <link href="https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════════ */
[data-direction="swiss"] {
  --font-display: "Switzer", "Helvetica Neue", sans-serif;
  --font-text: "Switzer", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --weight-display: 500;

  --color-bg: oklch(99% 0 0);
  --color-surface: oklch(95.5% 0 0);   /* градация поверхностей вместо теней */
  --color-elevated: oklch(92% 0 0);
  --color-text: oklch(15% 0 0);
  --color-muted: oklch(52% 0 0);
  --color-hairline: oklch(15% 0 0 / 0.14);
  --color-accent: oklch(55% 0.24 26);  /* один сигнальный красный */
  --color-accent-hover: oklch(48% 0.25 26);
  --color-on-accent: oklch(99% 0 0);

  --radius-xs: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 999px;

  --lh-hero: 0.9;
  --track-hero: -0.04em;               /* Rivian: -0.045em на 120px */
  --track-caps: 0.16em;
  --dur-reveal: 620ms;
  --reveal-shift: 20px;
  --cols: 12;
}
/* Тени запрещены: глубина только сдвигом поверхности. */
[data-direction="swiss"] :is(.card, .surface) { box-shadow: none; background: var(--color-surface); border: 1px solid var(--color-hairline); }

/* ═══════════════════════════════════════════════════════════════
   5. SOFT-INDUSTRIAL — язык площадки
   Для: slstudio (аренда студии), продакшн-локации, мейкерские бренды.
   Метафора-ориентир: «технический паспорт помещения: бетон, разметка,
   шильдики с номерами зон, метраж набран моноширинным».
   Сигнатура: маркировка как у оборудования — номер зоны, метраж, стрелки —
   и разметочный жёлтый строго на функциональном.

   <link href="https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&f[]=cabinet-grotesk@400,500,700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════════ */
[data-direction="soft-industrial"] {
  --font-display: "Clash Display", system-ui, sans-serif;
  --font-text: "Cabinet Grotesk", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --weight-display: 600;

  --color-bg: oklch(93% 0.004 250);    /* бетон, чуть холодный */
  --color-surface: oklch(88% 0.005 250);
  --color-elevated: oklch(97% 0.002 250);
  --color-text: oklch(22% 0.008 250);
  --color-muted: oklch(50% 0.008 250);
  --color-hairline: oklch(22% 0.008 250 / 0.18);
  --color-accent: oklch(80% 0.17 85);  /* разметочный жёлтый */
  --color-accent-hover: oklch(74% 0.18 85);
  --color-on-accent: oklch(18% 0.01 250);

  --radius-xs: 0px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;

  --lh-hero: 0.88;
  --track-hero: -0.03em;
  --dur-reveal: 560ms;
  --reveal-shift: 24px;
  --grid-size: 64px;                   /* разлиновка как на чертеже */
}
[data-direction="soft-industrial"] :is(.card, .surface) {
  background: var(--color-elevated);
  border: 1px solid var(--color-hairline);
  box-shadow: none;
}
/* Шильдик: номер зоны в рамке, как маркировка на щитке. */
[data-direction="soft-industrial"] .plate {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  border: 1px solid currentColor;
}

/* ═══════════════════════════════════════════════════════════════
   6. RETRO-FUTURE — хром и кислота
   Для: креаторские кампании, спецпроекты, молодёжные бренды. Редко и метко.
   Метафора-ориентир: «интерфейс с кассеты 1999-го, но собранный сегодня».
   Сигнатура: хромированная типографика, глитч на hover, кислота на тёмном.

   <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════════ */
[data-direction="retro-future"] {
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-text: "Space Mono", ui-monospace, monospace;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --weight-display: 800;

  --color-bg: oklch(16% 0.02 280);
  --color-surface: oklch(21% 0.03 280);
  --color-elevated: oklch(26% 0.04 280);
  --color-text: oklch(96% 0.01 280);
  --color-muted: oklch(70% 0.03 280);
  --color-hairline: oklch(96% 0.01 280 / 0.2);
  --color-accent: oklch(85% 0.2 165);  /* кислотная мята */
  --color-accent-hover: oklch(90% 0.21 165);
  --color-on-accent: oklch(16% 0.02 280);

  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 12px; --radius-lg: 24px;

  --lh-hero: 0.9;
  --track-hero: -0.02em;
  --dur-reveal: 480ms;
  --reveal-shift: 22px;
}
/* Хром — это не серый градиент, а несколько резких переходов светлоты. */
[data-direction="retro-future"] .chrome {
  background: linear-gradient(174deg,
    oklch(98% 0 0) 8%, oklch(62% 0.01 250) 30%, oklch(90% 0.01 220) 42%,
    oklch(45% 0.02 260) 58%, oklch(96% 0 0) 74%, oklch(70% 0.01 240) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   Служебное: применяем токены направления к базовым элементам,
   чтобы пресет работал сразу, без дублирования правил в проекте.
   ═══════════════════════════════════════════════════════════════ */
[data-direction] .btn,
[data-direction] button.btn-primary,
[data-direction] .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
[data-direction] .btn-primary:hover { background: var(--color-accent-hover); }
[data-direction] .btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-hairline);
}
[data-direction] .btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }