/* ============================================================
   Proxy-Guide brand tokens — CYCLE 1
   Source: Figma fileKey 3I2VxeIYkwUGwg7msq5lzw
           nodes 2411:2 (desktop) + 2432:1355 (mobile)
   Decision: D-092 (isolated brand, prefix --pg-*)
   Rules: .claude/rules/frontend.md → "Proxy-Guide brand (isolated)"
   ============================================================ */

:root {
  /* === Colors (11 use + 8 spec from frontend.md, 19 total) === */
  --pg-color-deep:      #260264;  /* deep violet bg accents */
  --pg-color-primary:   #6c5ce7;  /* primary brand violet (buttons, logo dot) */
  --pg-color-violet-300:#985efd;  /* light violet (CTA highlights) */
  --pg-color-violet-400:#8a7bfd;  /* mid-violet — declared by canon (D-092) */
  --pg-color-violet-500:#7e57c2;  /* darker violet — declared by canon (D-092) */
  --pg-color-violet-600:#4f2bb8;  /* gradient mid-stop (telegram-cta) */
  --pg-color-accent:    #0088cc;  /* Telegram-blue accent */
  --pg-color-success:   #22c55e;  /* status green — declared by canon (D-092) */

  /* Surfaces (light) */
  --pg-surface-0:       #ffffff;
  --pg-surface-1:       #f9f9fb;
  --pg-surface-2:       #f3f4f6;
  --pg-surface-3:       #e0f2fe;  /* declared by canon (D-092) */

  /* Borders */
  --pg-border-soft:     #d9d9d9;  /* declared by canon */
  --pg-border:          #c2beca;
  --pg-text-muted:      #bebecb;
  --pg-text-subtle:     #bdc1ca;

  /* Ink (dark — for dark sections / text on light bg) */
  --pg-ink-900:         #000000;
  --pg-ink-800:         #0a0510;
  --pg-ink-700:         #1b1820;
  --pg-ink-600:         #1d1a23;  /* declared by canon (D-092) */

  /* Semantic tokens (mapped from raw) */
  --pg-bg:              var(--pg-surface-0);
  --pg-bg-dark:         var(--pg-ink-800);
  --pg-text:            var(--pg-ink-700);
  --pg-text-on-dark:    var(--pg-surface-0);
  --pg-text-dim:        var(--pg-text-subtle);
  --pg-link:            var(--pg-color-primary);

  /* === Typography (from 24 unique text styles found in nodes) === */
  --pg-font-display:    "Montserrat", system-ui, -apple-system, sans-serif;
  --pg-font-body:       "Inter", system-ui, -apple-system, sans-serif;

  /* H1: 60px desktop / 24px mobile — bridged by clamp */
  --pg-text-h1-size:    clamp(24px, 4.16vw + 8px, 60px);
  --pg-text-h1-lh:      1.1;
  --pg-text-h1-ls:      -0.6px;

  /* H2: 48px desktop / 24px mobile */
  --pg-text-h2-size:    clamp(24px, 2.5vw + 16px, 48px);
  --pg-text-h2-lh:      1.1;
  --pg-text-h2-ls:      -0.5px;

  /* H3: 23px section sub / 20px Inter */
  --pg-text-h3-size:    clamp(18px, 0.6vw + 16px, 23px);
  --pg-text-h3-lh:      1.2;

  /* Body */
  --pg-text-body-size:  16px;
  --pg-text-body-lh:    1.5;
  --pg-text-body-sm:    14px;
  --pg-text-caption:    12px;
  --pg-text-micro:      10px;

  /* Lead — Figma "Body" (Montserrat 20/145%) used for hero lead, split-section lead, CTA p */
  /* CYCLE 1.9: declared by canon (Figma node 2411:172, 2411:7, 2411:70, 2411:289) */
  --pg-text-lead-size:  20px;
  --pg-text-lead-lh:    1.45;

  /* Button */
  --pg-text-btn-size:   16px;
  --pg-text-btn-weight: 600;

  /* === Spacing — 4px grid, only those actually used === */
  --pg-sp-1:  4px;
  --pg-sp-2:  8px;
  --pg-sp-3:  12px;
  --pg-sp-4:  16px;
  --pg-sp-5:  20px;
  --pg-sp-6:  24px;
  --pg-sp-8:  32px;
  --pg-sp-10: 40px;
  --pg-sp-12: 48px;
  --pg-sp-16: 64px;
  --pg-sp-20: 80px;
  --pg-sp-24: 96px;

  /* === Radius (cleaned: 1.33 / 2.66 — это stroke-noise, отброшено) === */
  --pg-radius-xs:   6px;
  --pg-radius-sm:   8px;
  --pg-radius-md:   12px;
  --pg-radius-lg:   16px;
  --pg-radius-xl:   24px;
  --pg-radius-2xl:  40px;
  --pg-radius-3xl:  48px;
  --pg-radius-pill: 100px;

  /* === Shadow (5 unique from Figma) === */
  --pg-shadow-sm:   0 3px 6px rgba(18, 15, 40, 0.12);    /* card hover/dropdown */
  --pg-shadow-md:   0 8px 16px rgba(0, 0, 0, 0.06);      /* card normal */
  --pg-shadow-md-2: 0 8px 16px rgba(0, 0, 0, 0.12);      /* card active */
  --pg-shadow-lg:   0 25px 50px rgba(0, 0, 0, 0.25);     /* hero CTA, modal */

  /* === Layout === */
  --pg-container:        1200px;     /* content max-width (Figma frame 1440 - 240 outer) */
  --pg-container-narrow: 880px;
  --pg-page-pad-x:       24px;       /* mobile page horizontal padding */

  /* Transitions */
  --pg-tx-fast:   120ms ease-out;
  --pg-tx-base:   200ms ease-out;

  /* ============================================================
     === Audit-derived tokens (CYCLE 1.5) ===
     Source: components.csv from Figma nodes 2411:2 + 2432:1355
     ============================================================ */

  /* Page-level dark theme (root frame is #0a0510) */
  --pg-bg-page:            #0a0510;                  /* root + section bg */
  --pg-bg-header:          rgba(10, 5, 16, 0.80);    /* sticky translucent header */
  --pg-bg-burger:          rgba(108, 92, 231, 0.10); /* burger violet glow */
  --pg-surface-card-dark:  #1b1820;                  /* feature-card, article-card, btn--ghost-dark */
  --pg-text-lead-on-dark:  #c2beca;                  /* lead / paragraph text on dark */

  /* Borders on dark */
  --pg-border-on-dark:     rgba(255, 255, 255, 0.10);
  --pg-border-cta:         rgba(32, 32, 45, 0.40);

  /* Telegram CTA palette (gradient stops verbatim from Figma 2411:286) */
  --pg-color-tg-button:    #0088cc;
  --pg-gradient-telegram:  linear-gradient(90deg, #8c7dff 0%, #4414ac 50%, #5749c7 100%);

  /* Audit radii */
  --pg-radius-btn:          12px;  /* .btn--primary, .btn--ghost-dark */
  --pg-radius-btn-cta:      16px;  /* .telegram-cta .btn (Подписаться) */
  --pg-radius-burger:        6px;  /* .btn-burger */
  --pg-radius-logo-icon:     7px;  /* .site-logo shield icon */
  --pg-radius-card:         16px;  /* .feature-card, .article-card */
  --pg-radius-hero-media:   16px;  /* .hero__media (desktop) */
  --pg-radius-cta-desktop:  40px;  /* .telegram-cta outer (≥1024) */
  --pg-radius-cta-mobile:   24px;  /* .telegram-cta outer (<1024) */

  /* Audit sizes */
  --pg-size-burger:     40px;
  --pg-size-btn:        40px;
  --pg-size-btn-cta:    56px;
  --pg-size-logo-icon:  36px;
  --pg-size-bullet:     20px;

  /* Section / grid gaps */
  --pg-sp-section-gap-lg: 64px;  /* split-section horizontal gap on desktop */

  /* ============================================================
     === Section padding tokens (CYCLE 1.6 — semantic aliases) ===
     Source: Frame 141 itemSpacing 160 (desktop) + Frame 142 itemSpacing 96 (mobile)
     Achieved via .section { padding-block: ½ } in layout.css.
     ============================================================ */
  --pg-sp-section-pb-mobile:  48px;   /* = sp-12, mobile section pad-block-each-side */
  --pg-sp-section-pb-desktop: 80px;   /* = sp-20, desktop section pad-block-each-side */

  /* Section-internal vertical rhythm (Figma per-block itemSpacing) */
  --pg-sp-hero-stack-mobile:    24px; /* Hero (1 блок) mobile */
  --pg-sp-hero-stack-desktop:   32px; /* Hero (1 блок) desktop */
  --pg-sp-split-gap-desktop:    64px; /* VPN/Proxy split horizontal gap (== --pg-sp-section-gap-lg) */
  --pg-sp-articles-head-stack:  16px; /* gap between articles head and grid (desktop) */
  --pg-sp-cta-stack-mobile:     32px; /* Telegram CTA inner gap (mobile) */
  --pg-sp-footer-stack-mobile:  48px; /* Footer inner stack (mobile) */
}

/* TODO (CYCLE 2-5):
   - [ ] Подтвердить точные spacing-значения для секций «Решения», «Инструкция», «Блог», «Статья»
   - [ ] Если появятся новые радиусы (24/40/48 на одних, другие на других) — нормализовать в --pg-radius-*.
   - [ ] Уточнить --pg-shadow-* для article-card hover state.
   - [ ] Resolve: один shadow с alpha=0.00 в Figma — game-noise, не используется → не маппим.
   - [ ] Возможно понадобится --pg-color-error / --pg-color-warn для статусных баннеров (пока в Figma не встречается).
*/