/* =====================================================================
   vpn.how — Design Tokens (redesign #2 «Премиум-тех»)
   Layer OVER Bootstrap 5.3 + theme.css (loaded after theme.css).
   Palette: ink #0A0E14 + mint #19E3B1 — monochrome + 1 accent.
   Scope rule: this file adds VOCABULARY + safe global brand touches
   (heading font, ::selection). The premium dark look is OPT-IN per
   section via .theme-ink — the still-light pages stay untouched until
   redesigned page-by-page. Do NOT repoint --primary to mint globally
   (mint text on white is unreadable); mint becomes primary only inside
   .theme-ink.
   ===================================================================== */

:root {
  /* --- Brand primitives --------------------------------------------- */
  --ink:          #0A0E14;   /* page base (dark canvas) */
  --ink-2:        #11161F;   /* slightly raised ink */
  --surface-ink:  #1A2230;   /* card surface on ink */
  --surface-ink-2:#222C3A;   /* elevated / hover on ink */
  --off-white:    #F5F6F7;   /* inverse text base */
  --muted:        #6B7689;   /* muted neutral */

  --mint:         #19E3B1;   /* THE accent — on dark + as fills */
  --mint-bright:  #3BEBC0;   /* hover / active */
  --mint-deep:    #0A8F6E;   /* accent text/icons on LIGHT surfaces */
  --mint-soft:    rgba(25,227,177,.12); /* tint fill */
  --on-mint:      #06231B;   /* text on a mint fill */
  --mint-rgb:     25,227,177;

  /* --- Typography ---------------------------------------------------- */
  --font-head: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 1.55rem + 3.4vw, 4rem);
  --fs-h1:      clamp(2rem, 1.5rem + 1.9vw, 3rem);
  --fs-h2:      clamp(1.55rem, 1.25rem + 1.15vw, 2.25rem);
  --fs-h3:      clamp(1.3rem, 1.15rem + .55vw, 1.6rem);
  --fs-h4:      1.25rem;
  --fs-lead:    clamp(1.05rem, 1rem + .35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .75rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.6;
  --tracking-tight: -.02em;
  --tracking-wide:  .04em;

  /* --- Spacing (4 / 8 base) ----------------------------------------- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  /* --- Radii --------------------------------------------------------- */
  --radius-xs: 4px;  --radius-sm: 8px;   --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 20px;  --radius-2xl: 28px; --radius-pill: 999px;

  /* --- Shadows (light surfaces) + mint glow ------------------------- */
  --shadow-1: 0 1px 2px rgba(10,14,20,.06);
  --shadow-2: 0 6px 16px -4px rgba(10,14,20,.10);
  --shadow-3: 0 18px 40px -12px rgba(10,14,20,.18);
  --glow-mint: 0 8px 30px -8px rgba(25,227,177,.35);

  /* --- Motion / focus ----------------------------------------------- */
  --ease-out:    cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
  --dur-1: .15s; --dur-2: .25s; --dur-3: .4s;
  --focus-ring: 0 0 0 3px rgba(25,227,177,.45);
}

/* === Brand «ink» canvas — OPT-IN per section (hero etc., Step 3) ======
   Wrap a redesigned block in .theme-ink to get the premium dark look.
   Re-maps theme.css --vpn-* + Bootstrap vars so existing components
   (cards, .btn-primary, text, borders) adapt automatically. Scoped:
   the rest of the (light) site is unaffected. */
.theme-ink {
  --vpn-surface:    var(--surface-ink);
  --vpn-surface-2:  var(--surface-ink-2);
  --vpn-surface-3:  #2A3445;
  --vpn-text:       var(--off-white);
  --vpn-text-muted: #8a94a6;
  --vpn-border:     rgba(245,246,247,.10);
  /* accent → mint, only inside the canvas */
  --vpn-primary:    var(--mint);
  --primary:        var(--mint);
  --bs-primary:     var(--mint);
  --bs-primary-rgb: var(--mint-rgb);
  --bs-body-color:      var(--off-white);
  --bs-body-bg:         var(--ink);
  --bs-emphasis-color:  var(--off-white);
  --bs-secondary-color: #8a94a6;
  --bs-border-color:    rgba(245,246,247,.12);
  --bs-link-color:        var(--mint);
  --bs-link-hover-color:  var(--mint-bright);
  background-color: var(--ink);
  color: var(--off-white);
}
.theme-ink a { color: var(--mint); }
.theme-ink a:hover { color: var(--mint-bright); }
.theme-ink .btn-primary {
  --bs-btn-color: var(--ink);            --bs-btn-bg: var(--mint);          --bs-btn-border-color: var(--mint);
  --bs-btn-hover-color: var(--ink);      --bs-btn-hover-bg: var(--mint-bright); --bs-btn-hover-border-color: var(--mint-bright);
  --bs-btn-active-color: var(--ink);     --bs-btn-active-bg: var(--mint-bright);
  font-weight: 600;
}

/* === Brand components / utilities (opt-in) =========================== */
.btn-mint {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--mint); color: var(--ink);
  font-family: var(--font-body); font-weight: 600; line-height: 1;
  border: 0; border-radius: var(--radius-pill);
  padding: .8rem 1.5rem; cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.btn-mint:hover { background: var(--mint-bright); color: var(--ink); transform: translateY(-1px); box-shadow: var(--glow-mint); }
.btn-mint:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: inherit;
  font-weight: 600; border: 1px solid currentColor; border-radius: var(--radius-pill);
  padding: .8rem 1.5rem; cursor: pointer; opacity: .8;
  transition: opacity var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.btn-ghost:hover { opacity: 1; background: rgba(127,127,127,.08); }

.font-head { font-family: var(--font-head); }
.font-body { font-family: var(--font-body); }
.text-mint     { color: var(--mint); }
.text-mint-ink { color: var(--mint-deep); }      /* mint on light surfaces */
.bg-ink        { background: var(--ink); color: var(--off-white); }

.surface-card {
  background: var(--vpn-surface); border: 1px solid var(--vpn-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--mint-deep);
}
.theme-ink .eyebrow { color: var(--mint); }
.chip-mint {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--mint-soft); color: var(--mint-deep);
  font-size: var(--fs-sm); font-weight: 600;
  padding: .3rem .8rem; border-radius: var(--radius-pill);
}
.theme-ink .chip-mint { color: var(--mint); }

/* === Safe GLOBAL brand touches (verified to work on the light site) == */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-head); }
::selection { background: var(--mint); color: var(--ink); }