/* ============================================================
   Octomatica design language v2: tokens + base reset.
   Source of truth: the live octomatica.ru (concept.css). Values are
   lifted from it; the dark remap is derived from its dark components.

   Load order: tokens.css -> components.css -> (print.css for offers).
   Copy the fonts/ folder next to this file (Manrope, self-hosted, RU-safe).

   The file has two layers:
     1. BRAND   : the only block you swap to use this language for a client
                  (accent ramp, brand mark). Everything else stays.
     2. LANGUAGE: surfaces, ink, type scale, radii, motion, fields.
   ============================================================ */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── 1. BRAND: ООО «Техно-Строй», Тверь (tstver.com, tko-tver.ru) ── */
  --accent: #c42329;          /* site red (tstver.com CSS): focus, small signals */
  --accent-bright: #f1c44d;   /* site mustard (tstver.com bands): primary button fill */
  --accent-deep: #b3232a;     /* logo red, deepened for AA text: eyebrows, active nav */
  --accent-soft: #fbefc9;     /* mustard tint: notices, washes */
  --accent-faint: #fdf6e3;    /* mustard faint: active nav, done state */
  --accent-ink: #2b2a29;      /* logo graphite: text on --accent-bright */
  --accent-on-dark: #f1c44d;  /* mustard on the graphite field */
  --brand-mark: url("assets/tehnostroy-logo.svg");                /* logo on light */
  --brand-mark-on-dark: url("assets/tehnostroy-logo-on-dark.svg"); /* logo on dark */

  /* ── 2. LANGUAGE ── */
  /* surfaces */
  --bg: #f7f6f3;              /* page canvas */
  --surface: #ffffff;         /* raised panel (board, receipt left half) */
  --surface-2: #efece6;       /* tinted band, footer, receipt */
  --ink-field: #2b2a29;       /* the dark field (ink band, image overlays) */
  --on-ink: #f2efea;          /* text on the ink field */
  --on-ink-muted: #d5d0c8;

  /* ink */
  --ink: #2b2a29;
  --muted-strong: #4a4642;
  --muted: #67625c;

  /* hairlines (rules, not boxes) */
  --line: #e8e4de;
  --line-strong: #d8d3cb;

  /* colour fields: the site's colour-blocked panels. Text on them is always --on-field. */
  --field-sand: #fbefc9;  --field-sand-spot: #f1c44d;
  --field-rose: #f7e0dc;  --field-rose-spot: #ed8d72;
  --field-sky:  #dce6f4;  --field-sky-spot:  #6284ca;
  --field-mint: #e3f2ea;  --field-mint-spot: #14b981;
  --on-field: #2b2a29;

  /* data hues (charts only, fixed order) */
  --c-1: #0e9f6e; --c-2: #6284ca; --c-3: #ed8d72; --c-4: #e2b93b; --c-5: #9b7bf0;

  /* type */
  --font: "Manrope", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(52px, 7.4vw, 104px);   /* hero h1 */
  --fs-h2: clamp(42px, 5.4vw, 74px);         /* section heading */
  --fs-h3: clamp(23px, 2.5vw, 32px);         /* item title */
  --fs-num: clamp(56px, 6.4vw, 96px);        /* price / big numeral */
  --fs-lead: clamp(17px, 1.55vw, 21px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;                          /* eyebrow, column labels */
  --tr-display: -0.075em;
  --tr-h2: -0.065em;
  --tr-h3: -0.035em;
  --tr-eyebrow: 0.12em;

  /* shape + depth */
  --radius: 16px;             /* every panel, image, board */
  --radius-sm: 12px;          /* chips, symbol tiles */
  --radius-lg: 22px;          /* brand stamp */
  --shadow: 0 28px 80px rgba(43, 42, 41, 0.09);
  --shadow-soft: 0 10px 30px rgba(43, 42, 41, 0.06);

  /* layout */
  --shell: min(1320px, calc(100vw - 56px));
  --header-height: 72px;
  --section-pad: clamp(64px, 7vw, 104px);

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: light dark;
}

/* ── Dark: one remap. Follows the OS unless the page pins data-theme. ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1b1a; --surface: #252422; --surface-2: #2e2c2a;
    --ink: #f2efea; --muted-strong: #d5d0c8; --muted: #aaa49c;
    --line: rgba(242, 239, 234, 0.1); --line-strong: rgba(242, 239, 234, 0.18);
    --accent: #f1c44d; --accent-deep: #f2827b; --accent-soft: rgba(241, 196, 77, 0.2); --accent-faint: rgba(241, 196, 77, 0.1);
    --ink-field: #141312;
    --field-sand: #d9be6c; --field-rose: #c9a39e; --field-sky: #9ea6b0; --field-mint: #9fb3a8;
    --shadow: 0 28px 80px rgba(0, 0, 0, 0.4); --shadow-soft: 0 12px 38px rgba(0, 0, 0, 0.3);
    --brand-mark: var(--brand-mark-on-dark);
  }
}
:root[data-theme="dark"] {
  --bg: #1c1b1a; --surface: #252422; --surface-2: #2e2c2a;
  --ink: #f2efea; --muted-strong: #d5d0c8; --muted: #aaa49c;
  --line: rgba(242, 239, 234, 0.1); --line-strong: rgba(242, 239, 234, 0.18);
  --accent: #f1c44d; --accent-deep: #f2827b; --accent-soft: rgba(241, 196, 77, 0.2); --accent-faint: rgba(241, 196, 77, 0.1);
  --ink-field: #141312;
  --field-sand: #d9be6c; --field-rose: #c9a39e; --field-sky: #9ea6b0; --field-mint: #9fb3a8;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.4); --shadow-soft: 0 12px 38px rgba(0, 0, 0, 0.3);
  --brand-mark: var(--brand-mark-on-dark);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (max-width: 1100px) { :root { --shell: min(100% - 40px, 980px); } }
@media (max-width: 760px) { :root { --shell: calc(100% - 32px); --header-height: 64px; } }

/* ── Base reset. Without the margin reset the browser's 8px body margin
      draws a white frame around the header and the hero. ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent-soft); color: var(--ink); }
main [id] { scroll-margin-top: calc(var(--header-height) + 24px); }