/* =========================================================================
   LiberoVPN Design System — Colors & Typography
   ========================================================================= */

/* -------------------------------------------------------------------------
   FONTS
   The marketing site uses a geometric/humanist sans. Closest public match:
   Plus Jakarta Sans for UI + headings. Inter as fallback.
   NOTE: No webfont files were attached. Swap these @import URLs for local
   files (fonts/) if you want fully offline fidelity.
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: brand ---------- */
  --brand-600: #5B3FE4;   /* primary brand purple (buttons, links) */
  --brand-500: #6B4FE8;   /* hover/accent */
  --brand-700: #4A32C4;   /* pressed */
  --brand-400: #8B74F0;
  --brand-300: #B5A5F6;
  --brand-200: #E4DEFB;   /* nav active pill, subtle fills */
  --brand-100: #F1EDFE;   /* tinted surfaces */
  --brand-50:  #F8F6FF;   /* page tint */

  /* Gradient endpoints (hero background) */
  --grad-from: #5145E5;
  --grad-to:   #783AEC;
  --grad-hero: linear-gradient(135deg, var(--grad-from) 0%, var(--grad-to) 100%);

  /* ---------- Color: neutrals ---------- */
  --ink-950: #0B0B1A;     /* primary text */
  --ink-900: #141427;
  --ink-800: #1F1F36;
  --ink-700: #2F2F4A;
  --ink-600: #4B4B66;     /* body text */
  --ink-500: #6C6C87;     /* secondary */
  --ink-400: #9A9AB0;     /* tertiary, icon muted */
  --ink-300: #C6C6D4;     /* borders strong */
  --ink-200: #E4E4ED;     /* borders */
  --ink-150: #EEEEF4;
  --ink-100: #F5F5F9;     /* surface-2 */
  --ink-50:  #FAFAFC;     /* surface-1 */
  --white:   #FFFFFF;

  /* ---------- Color: semantic ---------- */
  --success: #10B981;     /* connected */
  --success-tint: #D1FAE5;
  --warning: #F59E0B;
  --warning-tint: #FEF3C7;
  --danger:  #EF4444;     /* disconnected / kill */
  --danger-tint: #FEE2E2;
  --info:    #3B82F6;

  /* ---------- Foreground aliases ---------- */
  --fg-1: var(--ink-950);          /* headings */
  --fg-2: var(--ink-600);          /* body */
  --fg-3: var(--ink-500);          /* secondary */
  --fg-4: var(--ink-400);          /* muted */
  --fg-onbrand: #FFFFFF;           /* text on purple */
  --fg-onbrand-muted: rgba(255, 255, 255, 0.75);

  /* ---------- Background aliases ---------- */
  --bg-page:    #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-subtle:  var(--ink-50);
  --bg-sunken:  var(--ink-100);
  --bg-brand:   var(--grad-hero);

  /* ---------- Borders ---------- */
  --border-subtle: var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand:  var(--brand-200);
  --border-onbrand: rgba(255, 255, 255, 0.25);

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 2px rgba(17, 12, 48, 0.06);
  --shadow-sm: 0 2px 6px rgba(17, 12, 48, 0.06), 0 1px 2px rgba(17, 12, 48, 0.04);
  --shadow-md: 0 8px 24px rgba(17, 12, 48, 0.08), 0 2px 4px rgba(17, 12, 48, 0.04);
  --shadow-lg: 0 16px 40px rgba(17, 12, 48, 0.10);
  --shadow-brand: 0 12px 32px rgba(91, 63, 228, 0.35);
  --shadow-brand-lg: 0 24px 60px rgba(91, 63, 228, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur-base: 220ms;   /* @kind other */
  --dur-slow: 380ms;   /* @kind other */

  /* ---------- Type: families ---------- */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type: scale ---------- */
  --t-display: 72px;
  --t-h1: 56px;
  --t-h2: 40px;
  --t-h3: 28px;
  --t-h4: 22px;
  --t-h5: 18px;
  --t-body-lg: 18px;
  --t-body: 16px;
  --t-body-sm: 14px;
  --t-caption: 13px;
  --t-micro: 12px;

  /* ---------- Type: weight ---------- */
  --w-regular: 400;    /* @kind font */
  --w-medium: 500;     /* @kind font */
  --w-semibold: 600;   /* @kind font */
  --w-bold: 700;       /* @kind font */
  --w-extrabold: 800;  /* @kind font */

  /* ---------- Leading ---------- */
  --lh-tight: 1.1;     /* @kind font */
  --lh-snug: 1.25;     /* @kind font */
  --lh-normal: 1.45;   /* @kind font */
  --lh-relaxed: 1.6;   /* @kind font */
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================================= */

.ds-display {
  font-family: var(--font-sans);
  font-size: var(--t-display);
  font-weight: var(--w-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

.ds-h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--fg-1);
}

.ds-h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.ds-h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.ds-h5 {
  font-family: var(--font-sans);
  font-size: var(--t-h5);
  font-weight: var(--w-semibold);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.ds-body-lg {
  font-family: var(--font-sans);
  font-size: var(--t-body-lg);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.ds-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.ds-body-sm {
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.ds-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: var(--w-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-600);
}

.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--fg-2);
}

/* base reset helper for cards */
.ds-reset {
  box-sizing: border-box;
  font-family: var(--font-sans);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ds-reset *, .ds-reset *::before, .ds-reset *::after { box-sizing: border-box; }