/* Ipson brand palette — Pantone TCX, слой поверх дизайн-системы.
   Перенесено из handoff/css/palette.css с одним отличием: @import Podkova
   с Google Fonts заменён на самохостинг — см. @font-face в organic.css
   и обоснование в fonts/README.md.

   Organic cream ground · Brandied Melon 16-1340 accent
   Marina 17-4041 second accent · Mediterranean Blue 18-4334 interactive
   Patriot Blue 19-3925 ink

   Подключать ТОЛЬКО после organic.css — порядок значим. */

.ds-organic {
  --brand-cloud: #f5ead8; /* Organic cream — фон и выворотка на плашках */
  --brand-melon: #c97b5d;
  --brand-marina: #4f87c4;
  --brand-medblue: #14688f;
  --brand-patriot: #3b3b5c;

  --color-bg: var(--brand-cloud);
  --color-text: var(--brand-patriot);

  --color-accent: var(--brand-melon);
  --color-accent-100: color-mix(in oklab, var(--brand-melon) 12%, var(--brand-cloud));
  --color-accent-200: color-mix(in oklab, var(--brand-melon) 24%, var(--brand-cloud));
  --color-accent-300: color-mix(in oklab, var(--brand-melon) 42%, var(--brand-cloud));
  --color-accent-400: color-mix(in oklab, var(--brand-melon) 68%, var(--brand-cloud));
  --color-accent-500: var(--brand-melon);
  --color-accent-600: color-mix(in oklab, var(--brand-melon) 68%, var(--brand-patriot));
  --color-accent-700: color-mix(in oklab, var(--brand-melon) 46%, var(--brand-patriot));
  --color-accent-800: color-mix(in oklab, var(--brand-melon) 30%, var(--brand-patriot));
  --color-accent-900: color-mix(in oklab, var(--brand-melon) 18%, var(--brand-patriot));

  --color-accent-2: var(--brand-marina);
  --color-accent-2-100: color-mix(in oklab, var(--brand-marina) 12%, var(--brand-cloud));
  --color-accent-2-200: color-mix(in oklab, var(--brand-marina) 24%, var(--brand-cloud));
  --color-accent-2-300: color-mix(in oklab, var(--brand-marina) 42%, var(--brand-cloud));
  --color-accent-2-400: color-mix(in oklab, var(--brand-marina) 68%, var(--brand-cloud));
  --color-accent-2-500: var(--brand-marina);
  --color-accent-2-600: var(--brand-medblue);
  --color-accent-2-700: color-mix(in oklab, var(--brand-medblue) 84%, var(--brand-patriot));
  --color-accent-2-800: color-mix(in oklab, var(--brand-medblue) 56%, var(--brand-patriot));
  --color-accent-2-900: color-mix(in oklab, var(--brand-medblue) 30%, var(--brand-patriot));
}

/* Кремовый на мелоне в полную силу даёт всего 2.7:1 — заливка кнопки
   берёт более глубокую ступень. */
.ds-organic .btn-primary {
  background: color-mix(in oklab, var(--brand-melon) 52%, var(--brand-patriot));
  font-weight: 600;
}
/* Мелон светлее прежней терракоты, поэтому всё, что несёт мелкий текст
   в акценте, берёт глубокую ступень шкалы. */
.ds-organic .card-kicker { color: var(--color-accent-700); }
.ds-organic .tag-outline {
  color: var(--color-accent-700);
  border-color: var(--color-accent-700);
}
/* Дизайн-система приглушает th до 60% альфы от --color-text; поверх
   Patriot Blue это давало #85818d. Шапка таблицы берёт полную краску. */
.ds-organic .table th { color: var(--color-text); }

/* Собственное `a { color: inherit }` навигации перебивает .btn-primary */
.ds-organic .nav a.btn-primary { color: var(--color-bg); }
.ds-organic .btn-primary:hover {
  background: color-mix(in oklab, var(--brand-melon) 40%, var(--brand-patriot));
}

.ds-organic {
  --color-surface: #ebddc5;
  --color-neutral-700: color-mix(in oklab, var(--brand-cloud) 14%, var(--brand-patriot));
  --color-neutral-800: var(--brand-patriot);
  --color-neutral-900: color-mix(in oklab, var(--brand-patriot) 78%, #000);
}

/* У Caprasimo нет кириллицы, поэтому русскоязычный display-голос — Podkova:
   тёплый скруглённый слэб, покрывающий оба алфавита. Caprasimo остаётся
   только для латинского знака. */
.ds-organic {
  --font-heading: 'Podkova', Georgia, serif;
  --font-heading-weight: 700;
}
.ds-organic .wordmark,
.ds-organic .nav-brand {
  font-family: 'Caprasimo', 'Podkova', Georgia, serif;
  font-weight: 400;
  color: var(--brand-medblue);
}

/* ── слоты под фотографии ──
   Разметка из handoff: <figure class="shot" data-slot="…">. Пока снимка нет,
   блок показывает подпись; после подстановки <img> стили уже готовы. */
.shot {
  margin: 0; background: var(--color-surface);
  border-radius: calc(var(--radius-lg) * 1.15); overflow: hidden;
  display: grid; place-items: center;
  color: var(--color-neutral-700); font-size: 13px; text-align: center;
  padding: var(--space-4);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }