/* paket27.ru («Логотип 27») — дизайн-токены. Источник: https://paket27.ru/style.css + computed styles (09.11.2026).
   Слои: primitive -> semantic -> component. Помечено [предложение] — на сайте нет примера. */
@font-face{font-family:PrintDisplay;src:url('fonts/display.woff') format('woff');font-weight:700;font-display:swap} /* = DejaVu Sans Condensed Bold */
@font-face{font-family:PrintText;src:url('fonts/text.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:PrintMono;src:url('fonts/DejaVuSansMono.woff2') format('woff2');font-weight:400;font-display:optional}
@font-face{font-family:PrintMono;src:url('fonts/DejaVuSansMono-Bold.woff2') format('woff2');font-weight:700;font-display:optional}
       /* = DejaVu Sans */

:root{
  /* ---------- PRIMITIVE ---------- */
  --p-paper:#f3f1e9; --p-paper-2:#ebe9e0; --p-paper-3:#e5e3da; --p-sage:#e0e1d7; --p-stone:#e3e0d5;
  --p-kraft-bg:#e5dccc; --p-zip-bg:#dce2e3; --p-milk:#f6f2e8;
  --p-ink:#242320; --p-ink-bag:#292826; --p-muted:#71716a; --p-muted-2:#5c5e54;
  --p-line:#cfcec6; --p-line-input:#b8b7ae;
  --p-orange:#f14a24; --p-orange-text:#c23a1a; /* AA ≥4.5 на --p-paper */ --p-blue-focus:#315ac6; --p-sky:#b2c8d6;
  --p-kraft:#be9461; --p-kraft-dark:#a77a4a; --p-zip:#c5ced2; --p-navy:#303b76;
  --p-ink-a06:#24232010; --p-ink-a08:#24232015; --p-ink-a12:#24232020; --p-ink-a19:#24232030; --p-ink-a31:#24232050;
  --p-white-a21:#ffffff35; --p-orange-a12:#f14a2420;
  /* [предложение] состояния — в той же «печатной» гамме, плашечные, без градиентов */
  --p-red:#b3261e; --p-green:#2f6b3a; --p-amber:#8a5a00; --p-muted-aa:#63635c;

  --font-display:PrintDisplay,Arial,sans-serif; --font-text:PrintText,Arial,sans-serif; --font-accent:Georgia,serif;
  --font-mono:PrintMono,"DejaVu Sans Mono",ui-monospace,Menlo,Consolas,monospace;
  --ls-mono:0; --lh-mono:1.45;
  /* ширина пробела в моно ≈ ½ цифры: digit≈8.44px @14px, NBSP 8.45→4.25 при -0.30em (Chrome word-spacing действует на U+00A0; на U+202F — нет) */
  --mono-word-spacing:-0.30em;
  --fw-regular:400; --fw-bold:700;
  /* размеры шрифта, встречающиеся на сайте (десктоп) */
  /* минимум рабочего UI — 12px; токены <12 убраны */
  --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-20:20px; --fs-22:22px; --fs-23:23px; --fs-28:28px; --fs-34:34px; --fs-38:38px;
  --fs-h2:clamp(32px,3.45vw,54px); --fs-h1:clamp(48px,6.65vw,110px); --fs-method:clamp(44px,5.8vw,85px);
  --fs-contact:clamp(42px,8.3vw,130px); --fs-statement:clamp(80px,15vw,230px);
  --lh-tight:.88; --lh-display:1.04; --lh-h2:1.15; --lh-intro:1.25; --lh-h3:1.3; --lh-body:1.65; --lh-small:1.8; --lh-loose:1.9;
  --ls-h1:-.065em; --ls-h2:-.055em; --ls-statement:-.075em; --ls-h3:-.8px; --ls-wordmark:-1.8px;
  --ls-caps-s:.6px; --ls-caps-m:1px; --ls-caps-l:1.8px;
  --space-1:5px; --space-2:8px; --space-3:12px; --space-4:15px; --space-5:20px; --space-6:25px; --space-7:30px;
  --space-8:35px; --space-9:45px; --space-10:55px; --space-11:65px; --space-12:85px; --space-13:110px;
  --radius-0:0; --radius-round:50%;
  --shadow-print-s:8px 10px 0 var(--p-ink-a08); --shadow-print-m:12px 14px 0 #24232012; --shadow-print-l:13px 16px 0 var(--p-ink-a12);
  --dur-fast:.2s; --dur-mid:.4s; --dur-slow:.6s;
  --container-max:1480px; --gutter:4.5%;
  --bp-xl:1600px; --bp-l:1100px; --bp-m:800px; --bp-s:560px;

  /* ---------- SEMANTIC ---------- */
  --color-bg:var(--p-paper);
  --color-surface:var(--p-paper-2);          /* form */
  --color-surface-sunken:var(--p-paper-3);   /* .product-art */
  --color-surface-alt:var(--p-sage);         /* .playground */
  --color-surface-inverse:var(--p-ink);      /* .contact, .dark */
  --color-surface-brand:var(--p-orange);     /* .hero-visual, .statement */
  --color-text:var(--p-ink);
  --color-text-muted:var(--p-muted);         /* 4.35:1 — ниже AA для мелкого текста */
  --color-text-muted-aa:var(--p-muted-aa);   /* [предложение] 5.3:1 */
  --color-text-inverse:var(--p-paper);
  --color-accent:var(--p-orange);            /* акцентные слова, номера, подчёркивание nav */
  --color-accent-text:var(--p-orange-text);  /* мелкий акцентный текст: 4.74:1 на --p-paper */
  --color-border-strong:var(--p-ink);        /* 1px линии-разделители, рамка формы */
  --color-border:var(--p-line);
  --color-border-input:var(--p-line-input);
  --color-border-inverse:var(--p-white-a21);
  --color-focus-ring:var(--p-blue-focus);    /* ссылки/кнопки :focus-visible */
  --color-focus-input:var(--p-orange);       /* поля :focus */
  --color-hover-accent:var(--p-orange);
  --color-error:var(--p-red); --color-success:var(--p-green); --color-warning:var(--p-amber); /* [предложение] */
  --color-disabled-text:var(--p-muted); --color-disabled-bg:var(--p-paper-3); /* [предложение] */
  --font-heading:var(--font-display); --font-body:var(--font-text);
  --text-body:400 14px/1.65 var(--font-text);
  --text-small:400 var(--fs-12)/1.9 var(--font-text); /* было 11px → минимум 12 */
  --text-caption:400 var(--fs-12)/1.8 var(--font-text); /* было 9px → 12 */
  --text-kicker:400 var(--fs-12)/1.65 var(--font-text); /* было 8px → 12 */
  --text-h3:700 22px/1.3 var(--font-display);
  --text-h2:700 var(--fs-h2)/1.15 var(--font-display);
  --text-h1:700 var(--fs-h1)/1.04 var(--font-display);
  --section-pad-y:var(--space-12); --section-pad-x:var(--gutter);

  /* ---------- COMPONENT ---------- */
  --btn-font-size:var(--fs-12); /* было 11px */ --btn-min-h:55px; --btn-pad:17px 21px; --btn-gap:35px; --btn-radius:0; --btn-border:1px solid transparent;
  --btn-arrow-size:25px; --btn-hover-shift:translateY(-2px);
  --btn-primary-bg:var(--p-ink); --btn-primary-fg:var(--p-paper); --btn-primary-bg-hover:var(--p-orange); --btn-primary-fg-hover:var(--p-ink);
  --btn-inverse-bg:var(--p-paper); --btn-inverse-fg:var(--p-ink); --btn-inverse-bg-hover:var(--p-orange);
  --btn-text-pad:11px 0; --btn-text-border:1px solid var(--p-ink); --btn-text-hover:var(--p-orange);
  --input-bg:var(--p-paper); --input-border:1px solid var(--p-line-input); --input-radius:0; --input-pad:13px 12px;
  --input-font-size:var(--fs-12); /* было 11px */ --input-font-size-mobile:16px; --input-h:45px; --textarea-min-h:90px;
  --input-focus:2px solid var(--p-orange); --input-focus-offset:2px;
  --input-error-border:1px solid var(--p-red); /* [предложение] */
  --label-font-size:var(--fs-12); /* было 9px */ --label-gap:19px 0 8px;
  --form-bg:var(--p-paper-2); --form-border:1px solid var(--p-ink); --form-pad:28px;
  --card-border-top:1px solid var(--p-ink); --card-art-h:340px; --card-gap:20px;
  --stamp-size:112px; --stamp-bg:var(--p-ink); --stamp-fg:var(--p-paper); --stamp-rotate:14deg;
  --swatch-size:36px; --swatch-border:1px solid var(--p-ink-a31);
  --tag-font-size:var(--fs-12); /* было 8px */ --tag-ls:1.8px; /* kicker / meta-строки как «теги» */
  --table-head-border:1px solid var(--p-ink); --table-row-border:1px solid var(--p-line); --table-cell-pad:12px 0; --table-font-size:var(--fs-12); /* [предложение] */
  --nav-underline:2px solid var(--p-orange);
}

/* [предложение] тёмная тема — на сайте её нет; выведена из тех же оттенков (тёмный блок .contact) */
[data-theme="dark"]{
  --color-bg:var(--p-ink); --color-surface:#2e2d29; --color-surface-sunken:#1c1b19; --color-surface-alt:#33332e;
  --color-text:var(--p-paper); --color-text-muted:#a9a89f; --color-text-inverse:var(--p-ink);
  --color-border-strong:var(--p-paper); --color-border:var(--p-white-a21); --color-border-input:#5a5952;
  --btn-primary-bg:var(--p-paper); --btn-primary-fg:var(--p-ink); --input-bg:#1c1b19; --form-bg:#2e2d29;
}

/* ---------- ДОБАВКИ ДЛЯ РАБОЧЕГО UI КАЛЬКУЛЯТОРОВ (из mockups/_src/tokens.css, spec.md §4) ----------
   Единственное место с «сырыми» значениями цветов. Страницы используют только var(--…). */
:root{
  --p-line-input-aa:#8f8e86;                      /* [предложение AA] рамка поля */
  --color-text-muted-ui:var(--p-muted-aa);        /* рабочий UI: приглушённый текст с AA */
  --color-border-input-ui:var(--p-line-input-aa);
  --color-stale-opacity:.45;                      /* старый итог при пересчёте/проверке */
  --fs-min:12px;                                  /* рабочий текст не меньше 12px */
  /* --fs-12/13/14 уже в primitive выше */
  --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-32:32px;
  /* --fs-20/22/28/34 уже в primitive выше */
  --fs-ui-caption:12px; --fs-ui-body:14px; --fs-ui-h3:18px; --fs-ui-section:22px; --fs-ui-pane:26px;
  --fs-ui-appbar:22px; --fs-ui-total:48px; --fs-ui-total-m:40px; --fs-ui-sum-total:24px; --fs-ui-sticky:28px;
  --ls-ui-h:-.04em; --ls-ui-caps:1px;
  --shadow-print:var(--shadow-print-s);
  --shadow-sticky:0 -8px 0 var(--p-ink-a08);
  --touch-min:44px; --appbar-h:56px; --ui-input-h:48px; --ui-btn-fs:13px;
  --z-sticky-bar:25;
}


/* COMPACT-DESKTOP: только высоты контролов/тачей на десктопе; шрифты не трогаем.
   Телефон (≤800 / coarse) остаётся с --touch-min:44px. */
@media (pointer: fine) and (min-width: 801px) {
  :root {
    --touch-min: 36px;
    --ui-input-h: 36px;
    --btn-min-h: 40px;
    --appbar-h: 48px;
    /* чуть плотнее внутренние отступы кнопок/полей (высота уже через min-h) */
    --btn-pad: 8px 14px;
    --input-pad: 6px 10px;
  }
}

/* ========== MAIN PAGE ADDITIONS (paket27.ru index) ==========
   Append-only block for merge with calculator r4 tokens:
   take r4 tokens.css, then insert this whole block at the end.
   New primitives only when colour was not already in calculator tokens.
   ============================================================ */
:root{
  /* illustration strokes/fills — exact live SVG hex (не --p-ink/--p-muted, иначе пиксель ≠ живой) */
  --illus-kraft-handle:#34302a;
  --illus-kraft-stroke:#25231f;
  --illus-kraft-ink:#23221e;
  --illus-zip-stroke:#292929;
  --illus-zip-line:#6d797d;
  --illus-zip-pull:#f5f2e9;
  --illus-zip-pull-stroke:#2a2a2a;
  /* colours from live style.css that were missing as named primitives */
  --p-print-cream:#f1eee2;           /* .pvd-card --print */
  --p-ink-a07:#24232012;             /* drop-shadow mid / was raw in --shadow-print-m */
  --p-ink-a09:#24232016;             /* .screen-frame box-shadow */
  --font-system:Arial,sans-serif;    /* arrow glyphs in .cta/.text-button */
  /* main-page ONLY (decorative kickers <12px). Calculators must not use --fs-5…11; checks.py enforces. */
  --fs-5:5px; --fs-6:6px; --fs-7:7px; --fs-8:8px; --fs-9:9px; --fs-10:10px; --fs-11:11px;
  --fs-19:19px; --fs-25:25px; --fs-26:26px; --fs-27:27px; --fs-30:30px;
  --fs-49:49px; --fs-52:52px;
  --fs-brief-h2:clamp(30px,3.5vw,52px);
  /* composed shadows used on the main page */
  --shadow-screen:8px 10px 0 var(--p-ink-a09);
  --shadow-squeegee:0 10px 0 var(--p-orange-a12);
  /* re-point mid print shadow at the new primitive (same pixels) */
  --shadow-print-m:12px 14px 0 var(--p-ink-a07);

  /* legacy aliases from live :root — keep names used by style.css / SVG */
  --paper:var(--p-paper);
  --ink:var(--p-ink);
  --orange:var(--p-orange);
  --line:var(--p-line);
  --muted:var(--p-muted);
  --bag:var(--p-paper);
  --print:var(--p-ink);
  --backdrop:var(--p-orange);
}