/* ============================================================
   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;
  /* B-VISION S3.5: Figma ls=-1% → -0.01em (was -0.6px = -1% of 60px desktop only;
     em scales correctly across viewport sizes — keeps -1% relationship at mobile size too) */
  --pg-text-h1-ls:      -0.01em;

  /* 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) */

  /* ============================================================
     CYCLE 3.0 — Solutions page tokens
     Source: Figma RrvIKTb2CM1XVBgAgeO8ba, nodes 2438:2885 + 2448:4551
     ============================================================ */
  /* CYCLE 3.5 — Full alpha stops per Figma screenshot (prev. 0.2 edges faded to grey on #0a0510 bg). Frame 69 + Frame 82 share. */
  --pg-gradient-cta-solutions:  linear-gradient(90deg, rgba(140,125,255,1) 0%, rgba(68,20,172,1) 50%, rgba(87,73,199,1) 100%);

  /* CYCLE 3.0 — Solutions CTA wrapper card radius (Figma 32px, no existing token matches between --pg-radius-xl 24 and --pg-radius-2xl 40) */
  --pg-radius-cta-band:         32px;

  /* ============================================================
     CYCLE 3.1-P1 — Token consolidation (R&D-OPUS audit + eyebrow drill)
     Source: docs/figma-export/audit-20260504-{desktop-vars.yaml,
             diff-matrix.csv, eyebrow-drill.yaml}
     Decision: D-102 (tint-scale 5/10/20 canonical)
     ============================================================ */

  /* Violet tint scale (Figma-verified rgba fills, no Figma variable) */
  --pg-color-primary-tint-05: rgba(108, 92, 231, 0.05); /* eyebrow fill — Figma 2414:988 */
  --pg-color-primary-tint-10: rgba(108, 92, 231, 0.10); /* icon containers (cards, plates, col header) */
  --pg-color-primary-tint-20: rgba(108, 92, 231, 0.20); /* bullet hover, glow; reserved for eyebrow stroke (P3) */

  /* Soft border on dark (Figma divider rgba(255,255,255,0.08) — components.css L44+L1023) */
  --pg-border-on-dark-soft:   rgba(255, 255, 255, 0.08);

  /* Faded copy text (Figma footer copy 60% opacity over Серый — components.css L778) */
  --pg-text-fade-60:          rgba(194, 190, 202, 0.60);

  /* Ghost-light btn border (Figma 2411:654 stroke 40%) */
  --pg-border-ghost-light:    rgba(255, 255, 255, 0.40);

  /* CYCLE 3.2-W2 — Features list text fill (Figma "Body/Secondary" 80% white, used in Hero+VPN feature lists) */
  --pg-text-on-dark-soft:     rgba(255, 255, 255, 0.80);

  /* DEPRECATED near-duplicates (consolidate in P4):
     --pg-text-subtle (#bdc1ca) → --pg-text-lead-on-dark
     --pg-text-muted  (#bebecb) → --pg-text-lead-on-dark
     TODO P4: sweep components.css + pages/*.css, replace both with
     --pg-text-lead-on-dark, then remove the two tokens. */
}

/* 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 не встречается).
*/

/* ============================================================
   === PAGE: instructions ===
   Phase B-VISION B1 (2026-05-05). Page-scoped tokens for
   pages/instructions.html. Consumed only by styles/pages/instructions.css.
   Sources: Figma file RrvIKTb2CM1XVBgAgeO8ba, root 2455:2872.
   ============================================================ */
:root {
  /* Typography (page-local sizes, used in instr-hero subtitle, important__subtitle, FAQ items) */
  --pg-fs-h4:                       18px;
  --pg-fs-h5:                       16px;
  --pg-fs-h6:                       14px;
  --pg-fw-600:                      600;

  /* Hero glow ellipse (Figma 2455:2882 "Rectangle"; bbox 727,144 592×856; fill rgba(126,87,194,0.2); blur 200px; radius 296px)
     User-spec value 0.22 vs Figma 0.20 — using exact Figma value. */
  --pg-color-violet-glow:           rgba(126, 87, 194, 0.20);

  /* CTA gradient — desktop "Не знаете, что выбрать?" (Figma 2455:3600 fill_OF6J90, GRADIENT_LINEAR 90deg)
     stops: 0% rgba(140,125,255,0.2) → 50% rgba(68,20,172,1) → 100% rgba(87,73,199,0.2) */
  --pg-gradient-cta-instructions:   linear-gradient(90deg,
                                      rgba(140, 125, 255, 0.20) 0%,
                                      rgba(68, 20, 172, 1.00)  50%,
                                      rgba(87, 73, 199, 0.20)  100%);

  /* Step chip "Шаг 1/2/3" (Figma component 2414:969 "Label", instance 2455:3271)
     Confirmed by Figma:
       - stroke (border): rgba(108, 92, 231, 0.5) = primary-violet @ 50% alpha
       - borderRadius:    20px (acts as pill on h=40)
       - padding:         20px, gap: 10px, height: 40 (style applied in B3, not here)
     NOT confirmed by Figma REST (Label component has no fill in dump and text override
     is empty in this depth slice) — using safe defaults from operator brief:
       - bg:   rgba(126, 87, 194, 0.12) — soft violet tint (TBD: verify with deeper Figma fetch in B3)
       - text: #B8A1F5                  — light violet (TBD: verify in B3) */
  --pg-chip-step-bg:                rgba(126, 87, 194, 0.12);
  --pg-chip-step-border:            rgba(108, 92, 231, 0.50);
  --pg-chip-step-text:              #B8A1F5;

  /* ============================================================
     B-VISION RERUN — S2.0 (2026-05-05)
     Source: qa/figma-exports/instructions/recon-report.md §G
     Mappings derived from Figma get_figma_data depth=6 dumps.
     ============================================================ */

  /* Typography line-heights for partial size tokens */
  --pg-lh-h4:                       28px;     /* H4 size 18 (Important card title) */
  --pg-lh-h5:                       24px;     /* H5 size 16 (footer column heads) */
  --pg-lh-h6:                       24px;     /* H6 size 14 (Step number bullets "1"/"2") */
  --pg-lh-small:                    20px;     /* Small Inter Medium 12/20 (breadcrumbs, footer copy) */
  --pg-lh-little:                   1.45;     /* Little Inter Regular 14/145% */

  /* Page-instance H3 (Figma 24/32, beyond clamp cap of --pg-text-h3-size=23) */
  --pg-fs-h3-instructions:          24px;     /* testimonial author name */
  --pg-lh-h3-instructions:          32px;

  /* Off-grid paddings (Figma exact) */
  --pg-sp-btn-py:                   14px;     /* btn padding-block (Hero CTA, CTA-section, FAQ collapsed) */

  /* Layout aliases */
  --pg-sp-section-gap-instr:        160px;    /* Frame 148 itemSpacing */
  --pg-size-icon-wrapper:           48px;     /* Important card icon container */
  --pg-size-bullet-step:            32px;     /* Step number pill (Frame 104 32×32 violet) */
  --pg-container-faq:               937px;    /* FAQ section width (Frame 113) */

  /* Color aliases (semantic) */
  --pg-text-quote:                  #f9f9fb;  /* testimonial quote text fill */
  --pg-color-bezel-frame:           #1e2024;  /* Step 2 iPhone-bezel Container stroke */
  --pg-color-violet-mockup-glow:    #8a7bfe;  /* Hero iPhone-mockup inline glow rect */
  --pg-color-divider-subtle:        rgba(255, 255, 255, 0.05); /* Footer bottom-row top divider */

  /* Border-radius */
  --pg-radius-chip:                 20px;     /* Step 1 Label chip "ГАЙД ПО НАСТРОЙКЕ" */
  --pg-radius-card-lg:              24px;     /* Testimonial Frame 95 outer radius */
}