/* ==========================================================================
   DMGroup — design tokens, extracted from the Figma file «DMGroup — сайт»
   Sources: figma-dmgroup/tokens.json + figma-dmgroup/styles.mjs
   ========================================================================== */

:root {
  /* --- palette (Figma colour styles / most-used fills) ------------------- */
  --c-bg:          #140e0c; /* page background (Hero, sections) */
  --c-bg-deep:     #0e0d0b;
  --c-bg-deeper:   #0c0b0a;
  --c-bg-black:    #070706;
  --c-surface:     #1a1816; /* catalog card background */
  --c-well:        #121110; /* image well inside a card */
  --c-rule:        #2c2824; /* hairlines / dividers */
  --c-rule-2:      #463f38; /* stronger dividers */
  --c-rule-3:      #3a342e;
  --c-accent-dim:  #3c2820; /* accent-tinted plate */

  --c-accent:      #e8956a; /* orange accent */
  --c-text:        #f4f0e8; /* primary text */
  --c-text-alt:    #f3efe8; /* primary text (card variant) */
  --c-label:       #b3aaa0; /* table / spec labels */
  --c-muted:       #a39a90; /* secondary text */
  --c-dim:         #6e675f; /* tertiary text */
  --c-white:       #ffffff;

  /* --- geometry ---------------------------------------------------------- */
  --r:             2px;
  --page-max:      1440px;
  --content-max:   1344px;
  --gutter:        48px;   /* 1440 frame - 1344 content, per side */
  --gutter-sm:     16px;   /* mobile: 390 frame - 358 content */

  /* --- families ---------------------------------------------------------- */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Atkinson Hyperlegible Mono has no Cyrillic; JetBrains Mono covers it. */
  --font-mono: 'Atkinson Hyperlegible Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* --- type scale == named Figma text styles ----------------------------- */
  --t-caption-size: 11px;  --t-caption-lh: 14px;  --t-caption-w: 500;  --t-caption-ls: 1.2px;
  --t-small-size:   14px;  --t-small-lh:   20px;  --t-small-w:   400;  --t-small-ls:   0;
  --t-price-size:   18px;  --t-price-lh:   22px;  --t-price-w:   600;  --t-price-ls:   0;
  --t-button-size:  14px;  --t-button-lh:  18px;  --t-button-w:  500;  --t-button-ls:  0;
  --t-body-size:    16px;  --t-body-lh:    24px;  --t-body-w:    400;  --t-body-ls:    0;
  --t-block-size:   20px;  --t-block-lh:   26px;  --t-block-w:   600;  --t-block-ls:  -0.2px;
  --t-page-size:    32px;  --t-page-lh:    40px;  --t-page-w:    600;  --t-page-ls:   -0.4px;
  --t-bigprice-size:28px;  --t-bigprice-lh:34px;  --t-bigprice-w:600;  --t-bigprice-ls:-0.3px;

  /* sizes that appear outside the published styles, but are used on pages */
  --t-hero-size:    64px;  --t-hero-lh:    68px;  --t-hero-w:    600;  --t-hero-ls:   -1.6px;
  --t-h2-size:      36px;  --t-h2-lh:      42px;  --t-h2-w:      600;  --t-h2-ls:     -0.6px;
  --t-mono-lg-size: 64px;  --t-mono-lg-lh: 68px;  --t-mono-lg-w: 500;  --t-mono-lg-ls: -1.5px;
  --t-mono-md-size: 18px;  --t-mono-md-lh: 22px;  --t-mono-md-w: 500;
  --t-mono-sm-size: 12px;  --t-mono-sm-lh: 16px;  --t-mono-sm-w: 500;  --t-mono-sm-ls: 0.6px;
  --t-mono-label-size: 11px; --t-mono-label-lh: 14px; --t-mono-label-w: 400;

  /* --- spacing scale (Figma auto-layout gaps/paddings) ------------------- */
  --s-1: 2px;  --s-2: 4px;  --s-3: 6px;  --s-4: 8px;  --s-5: 10px;
  --s-6: 12px; --s-7: 14px; --s-8: 16px; --s-9: 20px; --s-10: 24px;
  --s-11: 28px; --s-12: 32px; --s-13: 36px; --s-14: 48px;
}