/*
 * Carpatian p15 design tokens (owned by the base/footer design agent). Loaded first of the cr_design_* files by
 * vqmod/xml/cr_p15_design.xml. Brand kept from the old shop: red logo accent, dark surfaces, Roboto Condensed
 * (headings) + Titillium Web (text). Layout rhythm from the Leo Shopio Auto reference (docs/design/REFERENCE-leo.md).
 *
 * Contrast (WCAG AA, 4.5:1 for text): white on --cr-accent #df1f2c 4.8:1 (the old #f8303d gave 3.8:1, it stays as
 * --cr-accent-bright for large/decorative accents and accents on dark surfaces), white on --cr-accent-hover 6.0:1,
 * --cr-link #0f5684 on white 7.4:1, --cr-blue-hover #0a4265 on white 10:1, --cr-success #1e7d3d on white 4.9:1,
 * --cr-text-muted #737381 on white 4.7:1, --cr-muted-on-dark #a7b1bb on --cr-dark 5.6:1. The same values are in the
 * Journal colour variables (sql-manual/2026-10-26_35_design_base.sql), so Journal-made styles match these tokens.
 */
:root {
  /* one action red: CTA, sale price, counters, active tab, current page */
  --cr-accent: #df1f2c;
  --cr-accent-hover: #c41824;
  --cr-accent-bright: #f8303d;
  --cr-accent-soft: rgba(223, 31, 44, .08);
  --cr-logo-red: #ed3237;
  /* graphite surfaces: header, footer, dark bands */
  --cr-dark: #2c3640;
  --cr-dark-deep: #1f262e;
  --cr-dark-line: rgba(255, 255, 255, .12);
  /* secondary blue: secondary buttons, links */
  --cr-blue: #0f5684;
  --cr-blue-hover: #0a4265;
  --cr-link: #0f5684;
  --cr-link-hover: #0a4265;
  --cr-text: #333333;
  --cr-text-strong: #1f262e;
  --cr-text-muted: #737381;
  --cr-text-on-dark: #eef1f4;
  --cr-muted-on-dark: #a7b1bb;
  --cr-bg: #ffffff;
  --cr-bg-alt: #f7f8fa;
  --cr-line: #e5e5e5;
  --cr-line-strong: #cfd4da;
  --cr-success: #1e7d3d;
  --cr-sale-label: #fee272;
  --cr-whatsapp: #189d4c;
  --cr-focus: #0f5684;
  --cr-focus-on-dark: #ffffff;

  --cr-font-display: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --cr-font-body: "Titillium Web", system-ui, -apple-system, "Segoe UI", sans-serif;

  --cr-container: 1290px;
  --cr-gutter: 30px;
  --cr-section-y: 60px;
  --cr-section-y-mobile: 30px;
  --cr-tap: 44px;

  --cr-radius-sm: 3px;
  --cr-radius: 5px;
  --cr-radius-pill: 10px;
  --cr-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  --cr-shadow-lg: 0 12px 32px rgba(14, 17, 20, .14);

  --cr-ease: cubic-bezier(.16, 1, .3, 1);
  --cr-fast: 150ms;
  --cr-normal: 300ms;
}