/* WL-VPN Brand System 2.0 — design tokens
   Import once, globally:  <link rel="stylesheet" href="/brand/tokens.css">  */

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Colour — core */
  --wl-void: #05070A;        /* page background */
  --wl-obsidian: #0B0F15;    /* panels, cards */
  --wl-graphite: #141A23;    /* raised surfaces */
  --wl-line: #232B38;        /* borders, grid lines */
  --wl-fog: #8B95A7;         /* secondary text */
  --wl-frost: #EEF2F7;       /* primary text; light background */
  --wl-white: #FFFFFF;

  /* Colour — accents */
  --wl-pulse: #2BF5C8;       /* signal accent — dark backgrounds only */
  --wl-pulse-deep: #008F74;  /* accent on light backgrounds (graphics, 24px+ text) */
  --wl-ion: #7C6CFF;         /* secondary accent — data and states only, sparingly */

  /* Semantic */
  --wl-bg: var(--wl-void);
  --wl-surface: var(--wl-obsidian);
  --wl-surface-raised: var(--wl-graphite);
  --wl-border: var(--wl-line);
  --wl-text: var(--wl-frost);
  --wl-text-muted: var(--wl-fog);
  --wl-accent: var(--wl-pulse);
  --wl-on-accent: var(--wl-void);

  /* Type */
  --wl-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wl-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wl-text-display: 600 72px/1 var(--wl-font-sans);   /* letter-spacing: -0.05em */
  --wl-text-h1: 600 40px/1.1 var(--wl-font-sans);      /* letter-spacing: -0.04em */
  --wl-text-h2: 500 24px/1.25 var(--wl-font-sans);     /* letter-spacing: -0.02em */
  --wl-text-body: 400 16px/1.62 var(--wl-font-sans);
  --wl-text-label: 500 12px/1.33 var(--wl-font-mono);  /* uppercase, letter-spacing: 0.12em */

  /* Space (8px grid) & shape */
  --wl-space-1: 4px;  --wl-space-2: 8px;  --wl-space-3: 12px; --wl-space-4: 16px;
  --wl-space-5: 24px; --wl-space-6: 32px; --wl-space-7: 48px; --wl-space-8: 64px; --wl-space-9: 96px;
  --wl-radius-sm: 8px;
  --wl-radius-md: 10px;   /* buttons, inputs */
  --wl-radius-lg: 16px;   /* cards, panels */

  /* Motion */
  --wl-ease-signal: cubic-bezier(0.2, 0.8, 0.2, 1);
  --wl-dur-fast: 150ms;
  --wl-dur-base: 300ms;
  --wl-dur-slow: 800ms;
  --wl-dur-logo: 2000ms;
}

/* Sensible base — optional */
body {
  margin: 0;
  background: var(--wl-bg);
  color: var(--wl-text);
  font: var(--wl-text-body);
}
a { color: var(--wl-pulse); }
a:hover { color: #8FFBE3; }