/* ============================================
   S-TECH ENERGY — DESIGN TOKENS
   (matched to s-tech-shop.ru visual system)
   ============================================ */

:root {
  /* Color */
  --color-blue: #3864AD;
  --color-blue-dark: #2A4C86;
  --color-orange: #E94A2C;
  --color-orange-dark: #C93A1F;
  --color-orange-tint: #F6C4B8;

  --color-bg: #F5F5F5;
  --color-bg-white: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-gray-num: #E7E7E7;

  --color-text: #171717;
  --color-text-muted: #666666;
  --color-text-faint: #9A9A9A;
  --color-border: #E0E0E0;
  --color-border-strong: #CACACA;

  /* dark-on-dark kept only for footer contrast text if needed */
  --color-text-on-dark: #F5F5F5;
  --color-text-on-dark-muted: #B7B7B7;

  --color-green: #2E9E6D;

  /* Type */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'PT Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --fs-xs: 0.8rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.85rem;
  --fs-2xl: 2.6rem;
  --fs-3xl: 3.6rem;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;

  /* Layout */
  --container-w: 1180px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;
}

@media (max-width: 768px) {
  :root {
    --fs-2xl: 1.9rem;
    --fs-3xl: 2.3rem;
    --fs-xl: 1.4rem;
    --space-6: 3rem;
    --space-7: 4rem;
  }
}