/* ============================================================
   NAS DESIGN SYSTEM · TOKENS
   Национальные автономные системы — фирменный стиль
   Триколор · технологичная эстетика · белый фон
   ============================================================ */

:root {
    /* ---------- BRAND PALETTE — TRICOLOR ---------- */
    --nas-white:        #ffffff;
    --nas-blue:         #0033a0;   /* Государственный синий */
    --nas-blue-600:     #1b4fb6;
    --nas-blue-500:     #2a66d0;
    --nas-blue-400:     #5b8bea;
    --nas-blue-100:     #e6edfa;
    --nas-blue-50:      #f3f6fc;

    --nas-red:          #d62939;   /* Государственный красный */
    --nas-red-600:      #c01c2d;
    --nas-red-500:      #e84656;
    --nas-red-100:      #fce8eb;
    --nas-red-50:       #fdf3f5;

    /* ---------- NEUTRAL SCALE ---------- */
    --ink-900: #0a0e1a;
    --ink-800: #161b2c;
    --ink-700: #303851;
    --ink-600: #4a5573;
    --ink-500: #6b7691;
    --ink-400: #97a1b8;
    --ink-300: #c4cad8;
    --ink-200: #e2e5ed;
    --ink-100: #f0f2f7;
    --ink-50:  #f8f9fc;

    /* ---------- SEMANTIC ---------- */
    --bg:           var(--nas-white);
    --bg-soft:      var(--ink-50);
    --bg-elevated:  var(--nas-white);
    --surface:      var(--ink-100);

    --border:       var(--ink-200);
    --border-strong:var(--ink-300);

    --text:         var(--ink-900);
    --text-muted:   var(--ink-500);
    --text-soft:    var(--ink-600);

    --primary:      var(--nas-blue);
    --primary-fg:   var(--nas-white);
    --accent:       var(--nas-red);
    --accent-fg:    var(--nas-white);

    --success:      #1f9d55;
    --warning:      #d99820;
    --danger:       var(--nas-red);

    /* ---------- RADII ---------- */
    --r-xs:  4px;
    --r-sm:  6px;
    --r-md:  10px;
    --r-lg:  16px;
    --r-xl:  24px;
    --r-pill:999px;

    /* ---------- SHADOWS ---------- */
    --shadow-xs:  0 1px 2px rgba(10,14,26,.04);
    --shadow-sm:  0 2px 6px rgba(10,14,26,.06);
    --shadow-md:  0 6px 18px rgba(10,14,26,.08);
    --shadow-lg:  0 18px 44px rgba(10,14,26,.10);
    --shadow-blue:0 14px 40px rgba(0,51,160,.18);
    --shadow-red: 0 14px 40px rgba(214,41,57,.18);

    /* ---------- TYPOGRAPHY ---------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-display: 'Manrope', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    --fs-xxs: 11px;
    --fs-xs:  12px;
    --fs-sm:  13px;
    --fs-md:  15px;
    --fs-lg:  17px;
    --fs-xl:  20px;
    --fs-2xl: 26px;
    --fs-3xl: 34px;
    --fs-4xl: 48px;
    --fs-5xl: 64px;
    --fs-6xl: 84px;

    /* ---------- SPACING ---------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10:40px;
    --sp-12:48px;
    --sp-16:64px;
    --sp-20:80px;
    --sp-24:96px;

    /* ---------- MOTION ---------- */
    --easing: cubic-bezier(.22,.61,.36,1);
    --t-fast: 140ms;
    --t-med:  240ms;
    --t-slow: 420ms;

    /* ---------- LAYOUT ---------- */
    --container: 1280px;
    --container-narrow: 980px;
}

/* ---------- BASE RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- TRICOLOR ACCENT (используется в брендинге) ---------- */
.tricolor-bar {
    display: inline-flex;
    height: 4px;
    border-radius: var(--r-pill);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.tricolor-bar > span { display: block; width: 18px; height: 100%; }
.tricolor-bar > span:nth-child(1) { background: var(--nas-white); border:1px solid var(--ink-200); }
.tricolor-bar > span:nth-child(2) { background: var(--nas-blue); }
.tricolor-bar > span:nth-child(3) { background: var(--nas-red); }

/* ---------- BRAND DOTS ---------- */
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.blue { background: var(--nas-blue); box-shadow: 0 0 10px rgba(0,51,160,.4); }
.dot.red  { background: var(--nas-red);  box-shadow: 0 0 10px rgba(214,41,57,.4); }
.dot.live { background: var(--success);  box-shadow: 0 0 10px rgba(31,157,85,.45); animation: pulse 1.6s infinite; }
@keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%     { opacity:.5; transform:scale(1.25); }
}

/* ---------- TECH GRID (subtle background pattern) ---------- */
.tech-grid {
    background-image:
        linear-gradient(rgba(0,51,160,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,51,160,.04) 1px, transparent 1px);
    background-size: 56px 56px;
}

/* ---------- UTILITY: containers ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

/* ---------- TYPOGRAPHY HELPERS ---------- */
.mono { font-family: var(--font-mono); letter-spacing: .03em; }
.kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-muted);
}
.kicker--accent { color: var(--nas-blue); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, var(--fs-5xl)); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: 600; }
p  { margin: 0 0 1em; }

/* ---------- BUTTONS ---------- */
.btn {
    --btn-bg: var(--nas-blue);
    --btn-fg: var(--nas-white);
    --btn-bd: var(--nas-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: var(--fs-sm);
    line-height: 1;
    transition: transform var(--t-fast) var(--easing), box-shadow var(--t-fast) var(--easing), background var(--t-fast);
    user-select: none;
    white-space: nowrap;
}
.btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow-blue); }
.btn:active { transform: translateY(0); }
.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--nas-blue);
    --btn-bd: var(--ink-200);
}
.btn--ghost:hover { --btn-bd: var(--nas-blue); box-shadow: var(--shadow-sm); }
.btn--accent {
    --btn-bg: var(--nas-red);
    --btn-fg: var(--nas-white);
    --btn-bd: var(--nas-red);
}
.btn--accent:hover { box-shadow: var(--shadow-red); }
.btn--light {
    --btn-bg: var(--nas-white);
    --btn-fg: var(--ink-900);
    --btn-bd: var(--nas-white);
}
.btn--lg  { padding: 16px 28px; font-size: var(--fs-md); border-radius: var(--r-md); }
.btn--sm  { padding: 8px 14px;  font-size: var(--fs-xs); border-radius: var(--r-sm); }

/* ---------- BADGES & CHIPS ---------- */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: var(--nas-blue-50);
    color: var(--nas-blue);
    border: 1px solid var(--nas-blue-100);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .02em;
}
.chip--red   { background: var(--nas-red-50); color: var(--nas-red); border-color: var(--nas-red-100); }
.chip--ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.chip--solid { background: var(--nas-blue); color: var(--nas-white); border-color: var(--nas-blue); }

/* ---------- CARDS ---------- */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    transition: transform var(--t-med) var(--easing), box-shadow var(--t-med) var(--easing), border-color var(--t-med);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--ink-300); transform: translateY(-2px); }
.card--bare { padding: 0; }
.card--interactive { cursor: pointer; }