/* ---------------------------------------------------------------------------
   Design tokens — canonical owners for every value that was inline in
   design-src/Главная - стилевые направления.dc.html
   Two directions share the canvas shell and the placeholder-slot surface.
   --------------------------------------------------------------------------- */

:root {
  /* ---- canvas (document) shell ---- */
  --canvas-bg: #cbc8c2;
  --canvas-ink: #1a1815;
  --canvas-eyebrow: #6b6659;
  --canvas-muted: #4a463e;
  --canvas-rule: #a9a59d;
  --canvas-note-ink: #3f3b34;
  --canvas-chip-ink: #5c574d;
  --canvas-shadow-a: 0 24px 64px rgba(20, 17, 14, .28);
  --canvas-shadow-b: 0 24px 64px rgba(20, 19, 15, .22);

  /* ---- direction 1a — «Ремесло» (dark leather) ---- */
  --a-bg: #14110e;
  --a-surface: #1c1815;
  --a-surface-deep: #1a1613;
  --a-ink: #f2ebe2;
  --a-ink-muted: #bdb0a0;
  --a-ink-soft: #a89a89;
  --a-ink-label: #9a8b78;
  --a-ink-nav: #cfc3b4;
  --a-ink-footer: #8a7c6b;
  --a-accent: #c08b4a;
  --a-accent-deep: #6b4f28;
  --a-rule: #2a241e;
  --a-rule-soft: #2f2822;
  --a-rule-btn: #4a4038;
  --a-field-bg: #191512;
  --a-field-rule: #332c25;
  --a-field-ink: #8d8172;
  --a-ph-dark: #1b1714;
  --a-ph-light: #231e19;
  --a-ph-ink: #8f8271;
  --a-ph-dark-card: #231e19;
  /* interaction */
  --a-accent-hover: #d49d5e;
  --a-surface-hover: #241f19;
  --a-rule-hover: #4a4038;
  --a-focus: #e2ab6a;
  /* the seam: a stitch line, the one graphic device 1a borrows from the craft */
  --a-seam: #b07f42;
  --a-seam-v: repeating-linear-gradient(to bottom, var(--a-seam) 0 6px, transparent 6px 14px);
  --a-seam-h: repeating-linear-gradient(to right, var(--a-seam) 0 6px, transparent 6px 14px);

  /* ---- direction 1b — «Минимал» (light stone) ---- */
  --b-bg: #edeae4;
  --b-surface: #f6f4f0;
  --b-surface-alt: #e6e3dc;
  --b-ink: #14130f;
  --b-ink-muted: #4b473d;
  --b-ink-soft: #57534a;
  --b-ink-label: #736e62;
  --b-ink-mono: #6c685e;
  --b-ink-nav: #3c3930;
  --b-accent: #37402f;
  --b-on-accent: #f4f2ee;
  --b-accent-label: #bcc4b2;
  --b-accent-text: #d5dace;
  --b-rule: #d4d0c7;
  --b-rule-soft: #ddd9d1;
  --b-field-rule: #3a382f;
  --b-field-ink: #8d8a80;
  --b-on-dark-muted: #b6b2a8;
  --b-ph-dark: #dfdbd2;
  --b-ph-light: #e6e2da;
  --b-ph-dark-alt: #dcd8cf;
  --b-ph-light-alt: #e3dfd7;
  --b-ph-ink: #665f56;
  /* interaction */
  --b-accent-hover: #2a3124;
  --b-surface-hover: #fbfaf7;
  --b-rule-hover: #9d998f;
  --b-focus: #37402f;
  --b-focus-on-dark: #c7cdbe;

  /* ---- type ---- */
  --font-serif: 'Prata', Georgia, serif;
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-grotesk: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- fixed frame metrics (the frames are fixed-size mockups) ---- */
  --frame-desktop-w: 1280px;
  --frame-mobile-w: 390px;
  --frames-gap: 36px;
  --radius-chip: 2px;
}