/* =============================================================================
   COFFEE WORLD — дизайн-система, токены (три слоя)
   Фаза 2 → перекраска во Fluent 2 (2026-10-12, решение владельца:
   «интерфейс должен быть строго как тут» — designsystems.one/fluent-design).

   Три слоя сохранены, значения заменены на канонические Fluent 2 web-tokens,
   затем (2026-10-20) бренд-рамп переведён на зелёный схемы топологии:
     brand #2e6b4e, accent #f5a623, neutral bg #fff/#f7f7f7, fg #242424/#424242,
     status success #0e700e / danger #c50f1f / warning #f7630c,
     радиусы 2/4/6/12/20/circular, тени мягкие (dy 1, blur 4, 7%),
     motion 150/200ms, сегой-рамп 68/32/24/20/16/14/12px.

   ИСТОРИЯ: до 2026-10-20 бренд был Fluent-синим #0f6cbd (600 #115ea3,
   700 #0c3b5e, tint #eff6fc). Заменён по решению владельца — «везде под
   стилистику схемы PinBimBim». Вернуть синий = вернуть четыре значения.

   ВАЖНО — конфликт с первоначальным ТЗ снят решением владельца:
   палитра Coffee World (#285D50 / #6A4533) из ТЗ ВЫТЕСНЕНА. Сохранена
   закомментированным блоком ниже как история решения (не активна).

   Менять значения — только здесь, компонентов не касаясь.
   ============================================================================= */

/* =============================================================================
   ВЫТЕСНЕННАЯ ПАЛИТРА (из первичного ТЗ; не активна с 2026-10-12)
   --cw-green-500:  #285d50;  (бывший brand-primary)
   --cw-coffee-500: #6a4533;  (бывший coffee)
   ============================================================================= */

/* =============================================================================
   СЛОЙ 1 — PRIMITIVE (сырые значения Fluent 2)
   ============================================================================= */
:root {
  /* Brand ramp — зелёный PinBimBim (решение владельца 2026-10-20:
     вся система переводится на палитру схемы топологии).
     Бывший Fluent-синий #0f6cbd сохранён в истории ниже. */
  --cw-brand-tint-40: #edf5f0;
  --cw-brand-tint-30: #4a8a6b;
  --cw-brand-700: #17392a;
  --cw-brand-600: #245741;
  --cw-brand-500: #2e6b4e;
  --cw-brand-foreground: #2e6b4e;

  /* Neutral ramp */
  --cw-neutral-000: #ffffff;
  --cw-neutral-050: #fafafa;
  --cw-neutral-100: #f5f5f5;
  --cw-neutral-200: #f0f0f0;
  --cw-neutral-300: #ebebeb;
  --cw-neutral-400: #e0e0e0;
  --cw-neutral-stroke-1: #d1d1d1;
  --cw-neutral-500: #bdbdbd;
  --cw-neutral-600: #616161;
  --cw-neutral-700: #424242;
  --cw-neutral-900: #242424;
  --cw-black: #000000;

  /* Status ramp (Fluent 2) */
  --cw-success-fill: #0e700e;
  --cw-success-bg: #dff6dd;
  --cw-success-fg: #0e700e;
  --cw-danger-fill: #c50f1f;
  --cw-danger-bg: #fdf3f4;
  --cw-danger-fg: #b10e1f;
  --cw-warning-fill: #f7630c;
  --cw-warning-bg: #fff4ce;
  --cw-warning-fg: #bc4b02;
  --cw-info-fill: #0f6cbd;
  --cw-info-bg: #eff6fc;
  --cw-info-fg: #115ea3;

  /* Fonts */
  --cw-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --cw-font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --cw-font-mono: "Cascadia Code", Consolas, monospace;

  /* Type ramp (px / line-height) */
  --cw-text-display: 68px;
  --cw-leading-display: 92px;
  --cw-text-title-1: 32px;
  --cw-leading-title-1: 40px;
  --cw-text-title-2: 24px;
  --cw-leading-title-2: 32px;
  --cw-text-title-3: 20px;
  --cw-leading-title-3: 28px;
  --cw-text-subtitle-2: 16px;
  --cw-leading-subtitle-2: 22px;
  --cw-text-body-1: 14px;
  --cw-leading-body-1: 20px;
  --cw-text-caption-1: 12px;
  --cw-leading-caption-1: 16px;

  /* Spacing, база 4px */
  --cw-space-xxs: 2px;
  --cw-space-xs: 4px;
  --cw-space-s: 8px;
  --cw-space-m: 12px;
  --cw-space-l: 16px;
  --cw-space-xl: 20px;
  --cw-space-xxl: 24px;
  --cw-space-xxxl: 32px;

  /* Radius. Шкала распределена по ролям (закреплено 2026-10-20):
     small 2    — волосяные детали (маркеры, подчёркивания)
     medium 4   — интерактивные controls (поля ввода, поиск, пункты навигации,
                  кнопки, табы-ссылки)
     large 6    — панели уровня контента (шаги, баннер, полоса операций /model)
     xlarge 12  — крупные поверхности (карточки, модалка, hero-плитка)
     circular   — пилюли (теги, бейджи, номера)
     Плитки идут отдельной шкалой --cw-tile-radius-sm/md: их скругление
     пропорционально размеру (~26%), поэтому 8px нет в общей шкале. */
  --cw-radius-small: 2px;
  --cw-radius-medium: 4px;
  --cw-radius-large: 6px;
  --cw-radius-xlarge: 12px;
  --cw-radius-circular: 9999px;

  /* Elevation (мягкие тени в стилистике схемы: dy 1, blur 4, 7%) */
  --cw-shadow-2: 0 1px 4px rgb(0 0 0 / 7%);
  --cw-shadow-8: 0 4px 12px rgb(0 0 0 / 8%), 0 1px 3px rgb(0 0 0 / 5%);
  --cw-shadow-16: 0 8px 24px rgb(0 0 0 / 9%), 0 2px 6px rgb(0 0 0 / 5%);
  --cw-shadow-28: 0 14px 36px rgb(0 0 0 / 12%), 0 4px 10px rgb(0 0 0 / 6%);

  /* Motion */
  --cw-duration-fast: 150ms;
  --cw-duration-normal: 200ms;
  --cw-curve-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);
}

/* =============================================================================
   СЛОЙ 2 — SEMANTIC (смысл, имена как в Fluent 2)
   ============================================================================= */
:root {
  --cw-color-brand-background: var(--cw-brand-500);
  --cw-color-brand-background-hover: var(--cw-brand-600);
  --cw-color-brand-background-pressed: var(--cw-brand-700);
  --cw-color-brand-foreground-link: var(--cw-brand-foreground);
  --cw-color-brand-stroke: var(--cw-brand-500);

  --cw-color-neutral-background-1: var(--cw-neutral-000);
  --cw-color-neutral-background-2: var(--cw-neutral-050);
  --cw-color-neutral-background-3: var(--cw-neutral-100);
  --cw-color-neutral-background-4: var(--cw-neutral-200);

  --cw-color-neutral-foreground-1: var(--cw-neutral-900);
  --cw-color-neutral-foreground-2: var(--cw-neutral-700);
  --cw-color-neutral-foreground-3: var(--cw-neutral-600);
  --cw-color-neutral-foreground-4: var(--cw-neutral-500);
  --cw-color-neutral-foreground-on-brand: var(--cw-neutral-000);

  --cw-color-neutral-stroke-1: var(--cw-neutral-stroke-1);
  --cw-color-neutral-stroke-2: var(--cw-neutral-400);

  --cw-color-status-success-background: var(--cw-success-bg);
  --cw-color-status-success-foreground: var(--cw-success-fg);
  --cw-color-status-danger-background: var(--cw-danger-bg);
  --cw-color-status-danger-foreground: var(--cw-danger-fg);
  --cw-color-status-warning-background: var(--cw-warning-bg);
  --cw-color-status-warning-foreground: var(--cw-warning-fg);
  --cw-color-status-info-background: var(--cw-info-bg);
  --cw-color-status-info-foreground: var(--cw-info-fg);

  /* Свои статусы дизайн-системы, которых нет в рампе Fluent 2.
     Было 11 позиций (унаследовано от Kenyan Coffee Club / Coffee World);
     после чистки 2026-10-21 остались только отрисованные: тег-«план» и
     тег-«действует». Успех/предупреждение/опасность/инфо/нейтрал теги берут
     из пар *-background / *-foreground выше — отдельные имена для того же
     смысла не держим. */
  --cw-color-status-planned: #8a5a00;
  --cw-color-status-active: var(--cw-brand-500);

  /* Фокус (Fluent: рамка бренда) */
  --cw-focus-stroke: var(--cw-brand-500);
}

/* =============================================================================
   СЛОЙ 3 — COMPONENT (параметры карточек, тегов, плиток, шелла)
   ============================================================================= */
:root {
  /* Focus (общая рамка фокуса: cta, кнопки навигации, ссылки) */
  --cw-focus-outline-width: 2px;
  --cw-focus-outline-offset: 2px;
  --cw-focus-outline-offset-inset: -2px;

  /* CTA-пилюля (тёмная, тон схемы) */
  --cw-cta-bg: #1c1c1c;
  --cw-cta-ink: var(--cw-neutral-000);
  --cw-cta-bg-hover: var(--cw-black);

  /* Акцент (жёлтый из палитры схемы: подсветка, номера, опора) */
  --cw-accent-500: #f5a623;
  --cw-accent-tint: #fdf4e3;
  --cw-accent-stroke: #efdfb8;
  --cw-accent-ink: #e09b00;
  --cw-accent-deep: #8a5e00;
  --cw-accent-on: #3d2b00;

  /* Card */
  --cw-card-bg: var(--cw-color-neutral-background-1);
  --cw-card-border: var(--cw-color-neutral-stroke-1);
  --cw-card-radius: var(--cw-radius-xlarge);
  --cw-card-shadow: var(--cw-shadow-2);
  --cw-card-pad: var(--cw-space-xxl);

  /* Плитка иконки — шкала размеров и подчёркивание текстовых ссылок.
     До 2026-10-20 в компонентах было пять сырых значений.
     Крупная плитка 64px живёт отдельным именем --cw-hero-tile-size (исключение
     B5+B6): она зашита в геометрию hero, а не в общую шкалу плиток. */
  --cw-tile-xs: 28px;
  --cw-tile-sm: 32px;
  --cw-tile-md: 44px;
  /* Скругление плитки пропорционально размеру (~26%). До 2026-10-20 плитки
     32px имели радиус и 6, и 12 — один размер, два разных вида. */
  --cw-tile-radius-sm: 8px;
  --cw-tile-radius-md: 12px;
  --cw-underline-offset: 2px;

  /* Tag */
  --cw-tag-radius: var(--cw-radius-circular);

  /* Shell */
  --cw-sidebar-width: 272px;
  --cw-sidebar-bg: var(--cw-color-neutral-background-1);
  --cw-topbar-height: 48px;
  --cw-nav-item-active-bg: color-mix(in srgb, var(--cw-brand-500) 9%, transparent);
  --cw-nav-item-active-bar: var(--cw-brand-500);
  --cw-icon-tile-bg: color-mix(in srgb, var(--cw-brand-500) 10%, var(--cw-neutral-000));
  --cw-icon-tile-ink: var(--cw-brand-600);
  --cw-hero-tile-size: 64px;

  /* Подложки зоны слоёв: градация одного бренд-цвета, а не три разных хью —
     рампа статусов семантическая, для декора не используется. */
  --cw-layer-pill-1: color-mix(in srgb, var(--cw-brand-500) 8%, var(--cw-neutral-000));
  --cw-layer-pill-2: color-mix(in srgb, var(--cw-brand-500) 17%, var(--cw-neutral-000));
  --cw-layer-pill-3: color-mix(in srgb, var(--cw-brand-500) 27%, var(--cw-neutral-000));

  /* База страницы */
  --cw-body-bg: #f7f7f7;
  --cw-body-ink: var(--cw-color-neutral-foreground-1);
  --cw-body-font: var(--cw-font-body);
}

/* =============================================================================
   БАЗА ДОКУМЕНТА
   ============================================================================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cw-body-bg);
  color: var(--cw-body-ink);
  font-family: var(--cw-body-font);
  font-size: var(--cw-text-body-1);
  line-height: var(--cw-leading-body-1);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: color-mix(in srgb, var(--cw-brand-500) 20%, transparent);
}

/* =============================================================================
   НЕИСПОЛЬЗУЕМЫЕ СТУПЕНИ ШКАЛ — ОСТАВЛЕНЫ НАМЕРЕННО (правило 2026-10-21)
   =============================================================================
   Чистка 2026-10-21 удалила всё, что принадлежало удалённым компонентам
   (кнопки, поля ввода, модалка, тосты, прогресс, статус-точки, overlay).
   Следующие токены ссылок из CSS не получают, но остаются: это ступени шкал и
   рамп. Шкала обязана быть полной — иначе следующий читатель не отличит
   «сейчас не используется» от «использовать нельзя».

     --cw-brand-tint-30                     ступень бренд-рампы
     --cw-accent-500 / -ink / -on           палитра акцента; те же значения
                                           использует assets/img/pinbimbim-topology-d2.svg
     --cw-neutral-300                       ступень нейтральной рампы
     --cw-success/danger/warning/info-fill  ступени рампы статусов (заливка)
     --cw-shadow-16 / -28                   ступени шкалы elevation
     --cw-duration-normal                   ступень шкалы motion
     --cw-leading-display                    ступень типографской шкалы
                                           (hero использует 82px — исключение)
   ============================================================================= */