/* Техно-Строй theme: taste direction "clinical", one change: Oswald display,
   like the stencil lettering on the company's containers.
   Every value is named after something in the company's yard. */

@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../fonts/oswald-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../fonts/oswald-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; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/onest-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 {
  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Onest", "Helvetica Neue", Arial, sans-serif;
  --w-display: 600;
  --tr-display: -0.005em;
  --tr-h2: 0;
  --lh-display: 1.2;
  --fs-display: clamp(2.5rem, 1.5rem + 4.6vw, 5.6rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
  --radius: 6px;
  --radius-sm: 4px;
  --radius-button: 6px;
  --case-eyebrow: uppercase;
  --tr-eyebrow: 0.1em;
  --bg: #f4f4f1;            /* white multilift cab */
  --surface: #ffffff;       /* white cab door */
  --surface-2: #e8e8e3;     /* concrete yard */
  --ink: #16191c;           /* tyre and chassis graphite */
  --muted-strong: #353b41;  /* hydraulic hose */
  --muted: #545b62;         /* galvanised steel */
  --line: #d9d9d3;
  --line-strong: #b9bab3;
  --ink-field: #252c33;     /* grey steel bin */
  --on-ink: #f1f1ec;
  --on-ink-muted: #bcc3c9;
  --accent: #e0601a;        /* orange container */
  --accent-fill: #f26b1d;   /* orange container side */
  --accent-on-fill: #16191c;/* black logo on the orange side */
  --accent-text: #a8410a;   /* orange paint in shade */
  --accent-soft: #ffe2cc;   /* thinned orange paint */
  --field-1: #ffe2cc;       /* thinned orange paint */
  --field-1-ink: #16191c;
  --field-2: #ffd23f;       /* yellow office wall on 8 Marta */
  --field-2-ink: #16191c;
  --field-3: #252c33;       /* grey steel bin */
  --field-3-ink: #f1f1ec;
  color-scheme: light dark;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121518;          /* night yard */
    --surface: #1a1f24;
    --surface-2: #1f252b;
    --ink: #eceae4;
    --muted-strong: #cfd3d6;
    --muted: #9ea6ad;
    --line: rgba(236, 234, 228, 0.12);
    --line-strong: rgba(236, 234, 228, 0.24);
    --ink-field: #0b0d0f;
    --on-ink: #eceae4;
    --on-ink-muted: #aeb6bc;
    --accent: #ff8a3d;
    --accent-fill: #f26b1d;
    --accent-on-fill: #16191c;
    --accent-text: #ff9a5c;
    --accent-soft: #3a2416;
    --field-1: #3a2416;
    --field-1-ink: #eceae4;
    --field-2: #3b3214;
    --field-2-ink: #eceae4;
    --field-3: #0b0d0f;
    --field-3-ink: #eceae4;
  }
}
@media screen {
  :root[data-theme="dark"] {
    --bg: #121518;
    --surface: #1a1f24;
    --surface-2: #1f252b;
    --ink: #eceae4;
    --muted-strong: #cfd3d6;
    --muted: #9ea6ad;
    --line: rgba(236, 234, 228, 0.12);
    --line-strong: rgba(236, 234, 228, 0.24);
    --ink-field: #0b0d0f;
    --on-ink: #eceae4;
    --on-ink-muted: #aeb6bc;
    --accent: #ff8a3d;
    --accent-fill: #f26b1d;
    --accent-on-fill: #16191c;
    --accent-text: #ff9a5c;
    --accent-soft: #3a2416;
    --field-1: #3a2416;
    --field-1-ink: #eceae4;
    --field-2: #3b3214;
    --field-2-ink: #eceae4;
    --field-3: #0b0d0f;
    --field-3-ink: #eceae4;
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}

/* signature: tabular figures for every price */
body { font-variant-numeric: tabular-nums; }