/* ============================================================
   escape VPN — Foundations
   Colors, type, spacing, radii, shadows, motion.
   Source of truth for any escape-branded artifact.
   ============================================================ */

@font-face {
  font-family: "Fixel Display";
  src: url("./fonts/FixelDisplay-Medium.woff2") format("woff2"),
       url("./fonts/FixelDisplay-Medium.otf")  format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fixel Display";
  src: url("./fonts/FixelDisplay-Bold.woff2") format("woff2"),
       url("./fonts/FixelDisplay-Bold.otf")  format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Core palette ──────────────────────────────────────────
     escape lives in a near-black world. Pure black is rare;
     surfaces are warm-cool dark greys that the eye reads as
     "void". White is punchy, used sparingly. */

  --esc-black:        rgb(15, 15, 15);   /* page background */
  --esc-ink:          rgb(22, 23, 23);   /* card body (under blur) */
  --esc-graphite-900: rgb(36, 40, 39);   /* hairline border */
  --esc-graphite-800: rgb(38, 41, 41);   /* surface fill */
  --esc-graphite-700: rgb(64, 68, 68);   /* muted divider/text */
  --esc-graphite-500: rgb(75, 76, 76);   /* fill button */
  --esc-fog-500:      rgb(153, 153, 153);/* secondary text */
  --esc-fog-300:      rgb(171, 180, 179);/* placeholder text */
  --esc-white:        rgb(255, 255, 255);
  --esc-white-85:     rgba(255, 255, 255, 0.85);

  /* No chromatic accent. The system is strictly monochrome:
     state is communicated through opacity, weight, and white. */

  /* Translucent surfaces (sit over the hero image). Always
     paired with backdrop-filter blur. */
  --esc-glass-soft:   rgba(22, 23, 23, 0.6);    /* large cards */
  --esc-glass-input:  rgba(38, 41, 41, 0.2);    /* primary input */
  --esc-glass-row:    rgba(38, 41, 41, 0.4);    /* list rows */
  --esc-glass-line:   rgba(64, 68, 68, 0.8);    /* on-glass divider */
  --esc-glass-border: rgb(36, 40, 39);          /* 0.5px hairline */

  /* ── Semantic tokens ─────────────────────────────────────── */
  --bg-canvas:        var(--esc-black);
  --bg-surface:       var(--esc-ink);
  --bg-surface-glass: var(--esc-glass-soft);
  --bg-row:           var(--esc-glass-row);
  --bg-input:         var(--esc-glass-input);
  --bg-pill:          var(--esc-graphite-500);

  --fg-primary:       var(--esc-white);
  --fg-secondary:     var(--esc-fog-500);
  --fg-tertiary:      var(--esc-fog-300);
  --fg-muted:         var(--esc-glass-line);
  --fg-on-light:      rgb(33, 33, 53);

  --border-hairline:  0.5px solid var(--esc-glass-border);
  --border-divider:   1px solid var(--esc-glass-line);

  --accent:           var(--esc-white);
  --accent-press:     var(--esc-white-85);

  /* ── Type ────────────────────────────────────────────────── */
  --font-display:     "Fixel Display", -apple-system, BlinkMacSystemFont,
                      "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-mono:        ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes observed in source: 26 (title), 15 (body), 14 (placeholder),
     13 (caption). Extrapolated up for marketing surfaces. */
  --fs-display-xl:    56px;
  --fs-display-lg:    40px;
  --fs-display-md:    32px;
  --fs-h1:            26px;   /* "Добро пожаловать" */
  --fs-h2:            22px;
  --fs-h3:            18px;
  --fs-body:          15px;   /* primary body */
  --fs-body-sm:       14px;   /* placeholder, hints */
  --fs-caption:       13px;   /* dividers, metadata */
  --fs-micro:         11px;   /* status bar */

  --lh-tight:         1.0;
  --lh-snug:          1.15;
  --lh-body:          1.40;   /* 22/15 ≈ 1.46 in source */
  --lh-loose:         1.55;

  --ls-display:       -0.4px; /* tight, bold display */
  --ls-h1:            -0.2px; /* observed */
  --ls-body:          0;
  --ls-caps:          0.06em;

  --fw-medium:        500;
  --fw-bold:          700;

  /* ── Spacing (4px base) ──────────────────────────────────── */
  --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;

  /* ── Radii ───────────────────────────────────────────────── */
  --r-button:    12px;   /* small chip / icon buttons */
  --r-input:     20px;   /* text inputs, list rows */
  --r-card:      48px;   /* glass cards (signature) */
  --r-screen:    16px;   /* device-frame inner radius */
  --r-pill:      999px;

  /* ── Blurs ───────────────────────────────────────────────── */
  --blur-card:       blur(80px);
  --blur-input:      blur(40px);

  /* ── Shadows ─────────────────────────────────────────────── */
  /* The system avoids drop-shadows on most surfaces (depth
     comes from blur + translucency). Reserved for marketing/web. */
  --shadow-card:     0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-inset:    inset 0 0 0 0.5px var(--esc-glass-border);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-standard:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:        140ms;
  --dur-base:        220ms;
  --dur-slow:        360ms;
}

/* ── Element-level defaults ───────────────────────────────── */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 {
  font: var(--fw-bold) var(--fs-h1) / var(--lh-snug) var(--font-display);
  letter-spacing: var(--ls-h1);
  color: var(--fg-primary);
  margin: 0;
}
h2 {
  font: var(--fw-bold) var(--fs-h2) / var(--lh-snug) var(--font-display);
  letter-spacing: var(--ls-h1);
  color: var(--fg-primary);
  margin: 0;
}
h3 {
  font: var(--fw-medium) var(--fs-h3) / var(--lh-snug) var(--font-display);
  color: var(--fg-primary);
  margin: 0;
}
p {
  font: var(--fw-medium) var(--fs-body) / var(--lh-body) var(--font-display);
  color: var(--fg-secondary);
  margin: 0;
  text-wrap: pretty;
}
small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  letter-spacing: var(--ls-caps);
}
a {
  color: var(--fg-primary);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a:hover { opacity: 0.7; }

/* ── Display / marketing utilities ─────────────────────────── */
.display-xl {
  font: var(--fw-bold) var(--fs-display-xl) / var(--lh-tight) var(--font-display);
  letter-spacing: var(--ls-display);
}
.display-lg {
  font: var(--fw-bold) var(--fs-display-lg) / var(--lh-tight) var(--font-display);
  letter-spacing: var(--ls-display);
}
.eyebrow {
  font: var(--fw-medium) var(--fs-caption) / 1 var(--font-display);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-secondary);
}