/*
Theme Name: Meta Sistem
Theme URI: https://metasistem.ru
Author: Meta Sistem
Author URI: https://metasistem.ru
Description: Custom theme for Meta Sistem — AI business automation agency
Version: 1.0.0
Text Domain: meta-sistem
*/

/* =============================================
   Design Tokens
   ============================================= */
:root {
  /* Colors */
  --colorBg:           #0D1117;
  --colorBgElevated:   #1C2333;
  --colorBgMid:        #111822;
  --colorBlue:         #1159C3;
  --colorBlueHover:    #1A6FE0;
  --colorBlueLight:    #5B9CF6;
  --colorMint:         #2DD4BF;
  --colorStar:         #FACC15;
  --colorTextPrimary:  #FFFFFF;
  --colorTextMuted:    rgba(255, 255, 255, 0.6);
  --colorTextDim:      rgba(255, 255, 255, 0.5);
  --colorCardBg:       rgba(28, 35, 51, 0.7);

  /* Typography */
  --fontSans: 'Inter', sans-serif;
  --fontMono: 'JetBrains Mono', monospace;

  /* Layout */
  --containerWidth:   1280px;
  --containerPadding: 1rem;

  /* Spacing (8px grid) */
  --sp4:  4px;
  --sp8:  8px;
  --sp12: 12px;
  --sp16: 16px;
  --sp20: 20px;
  --sp24: 24px;
  --sp32: 32px;
  --sp48: 48px;
  --sp64: 64px;
  --sp80: 80px;
  --sp96: 96px;

  /* Radii */
  --radiusCard: 4px;
  --radiusBtn:  4px;
  --radiusFull: 9999px;
  --radiusSharp: 2px;

  /* Borders */
  --colorBorderSubtle: rgba(255, 255, 255, 0.10);
  --colorBorderCard:   rgba(255, 255, 255, 0.12);

  /* Motion */
  --easingFluid:   cubic-bezier(0.16, 1, 0.3, 1);
  --durationFast:  150ms;
  --durationBase:  250ms;
  --durationSlow:  600ms;

  /* Z-index scale */
  --zBase:        0;
  --zContent:     10;
  --zOverlay:     20;
  --zHeader:      50;
  --zMobileMenu: 100;
}

/* =============================================
   Reset & Base
   ============================================= */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: var(--fontSans);
  background: var(--colorBg);
  color: var(--colorTextPrimary);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

::selection {
  background: rgba(45, 212, 191, 0.3);
  color: #fff;
}

::-webkit-scrollbar          { width: 6px; }
::-webkit-scrollbar-track    { background: var(--colorBg); }
::-webkit-scrollbar-thumb    { background: var(--colorBgElevated); border-radius: 3px; }

*:focus-visible {
  outline: 2px solid var(--colorMint);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =============================================
   Layout Utility
   ============================================= */
.container {
  max-width: var(--containerWidth);
  margin: 0 auto;
  padding-left: var(--containerPadding);
  padding-right: var(--containerPadding);
}