/* ============================================================
   REVAN VPN — Design Foundations
   colors_and_type.css
   Dark-first, technological, minimal. Indigo accent.
   Geist Sans (UI/display) + Geist Mono (technical data).
   ============================================================ */

/* Geist Mono (technical voice) from Google Fonts CDN; Inter (UI/display) self-hosted below. */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------
     COLOR — RAW PALETTE
     --------------------------------------------------------- */

  /* Backgrounds / surfaces (dark ladder, coolest at the base) */
  --bg-base:        #0F1117;  /* page background (given)            */
  --bg-sunken:      #0B0D12;  /* wells, code blocks, insets         */
  --bg-surface:     #161922;  /* cards, panels                      */
  --bg-elevated:    #1C2030;  /* menus, popovers, modals            */
  --bg-hover:       #20232E;  /* row / control hover                */

  /* Indigo accent scale (built around the given #6366F1) */
  --indigo-50:   #EEEFFE;
  --indigo-100:  #E0E1FD;
  --indigo-200:  #C3C5FB;
  --indigo-300:  #A0A3F7;
  --indigo-400:  #8184F4;
  --indigo-500:  #6366F1;  /* accent (given)                        */
  --indigo-600:  #4F52D8;  /* pressed                               */
  --indigo-700:  #4144B0;
  --indigo-800:  #313388;
  --indigo-900:  #232560;

  /* Neutral / text ladder (cool grays) */
  --neutral-0:    #FFFFFF;
  --neutral-100:  #ECEEF3;
  --neutral-200:  #C9CDD8;
  --neutral-300:  #A0A6B4;
  --neutral-400:  #767D8F;
  --neutral-500:  #565D6E;
  --neutral-600:  #3A4050;
  --neutral-700:  #292E3B;
  --neutral-800:  #1C2030;
  --neutral-900:  #12151D;

  /* Semantic status (VPN state-aware) */
  --green-500:   #22C55E;  /* connected / protected                */
  --green-bg:    rgba(34, 197, 94, 0.12);
  --amber-500:   #F59E0B;  /* connecting / unstable                */
  --amber-bg:    rgba(245, 158, 11, 0.12);
  --red-500:     #EF4444;  /* disconnected / exposed / error       */
  --red-bg:      rgba(239, 68, 68, 0.12);
  --cyan-500:    #22D3EE;  /* secondary data accent (ping, speed)  */

  /* ---------------------------------------------------------
     COLOR — SEMANTIC TOKENS  (use these in product work)
     --------------------------------------------------------- */
  --fg-1: var(--neutral-100);   /* primary text / headings          */
  --fg-2: var(--neutral-300);   /* secondary text / labels          */
  --fg-3: var(--neutral-400);   /* tertiary / captions / hints      */
  --fg-disabled: var(--neutral-500);
  --fg-on-accent: #FFFFFF;      /* text on indigo fill              */

  --accent:         var(--indigo-500);
  --accent-hover:   var(--indigo-400);
  --accent-pressed: var(--indigo-600);
  --accent-fg:      var(--indigo-300);   /* accent text on dark      */
  --accent-subtle:  rgba(99, 102, 241, 0.12);  /* tinted fill        */
  --accent-ring:    rgba(99, 102, 241, 0.45);   /* focus ring         */

  --status-ok:    var(--green-500);
  --status-warn:  var(--amber-500);
  --status-error: var(--red-500);

  /* Borders / hairlines (additive light on dark) */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --border-accent:  rgba(99, 102, 241, 0.55);

  /* ---------------------------------------------------------
     RADIUS  (8px is the brand default)
     --------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;    /* DEFAULT — buttons, inputs, cards         */
  --radius-lg:   12px;   /* large cards, panels                      */
  --radius-xl:   16px;   /* hero / feature surfaces                  */
  --radius-2xl:  24px;
  --radius-full: 9999px;

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

  /* ---------------------------------------------------------
     ELEVATION  (soft, low-contrast on dark; glow for accent)
     --------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px rgba(99,102,241,0.30), 0 8px 32px rgba(99,102,241,0.28);

  /* ---------------------------------------------------------
     MOTION
     --------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ---------------------------------------------------------
     TYPE — FAMILIES & BASE
     --------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

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

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* eyebrows / mono labels             */

  /* ---------------------------------------------------------
     TYPE — SEMANTIC ROLES
     scale ~1.25; tight tracking on large sizes (Swiss-precise)
     --------------------------------------------------------- */
  --display-size: 64px;  --display-lh: 1.04;  --display-ls: -0.03em; --display-fw: 600;
  --h1-size: 44px;       --h1-lh: 1.08;       --h1-ls: -0.025em;     --h1-fw: 600;
  --h2-size: 32px;       --h2-lh: 1.14;       --h2-ls: -0.02em;      --h2-fw: 600;
  --h3-size: 24px;       --h3-lh: 1.2;        --h3-ls: -0.015em;     --h3-fw: 600;
  --h4-size: 19px;       --h4-lh: 1.3;        --h4-ls: -0.01em;      --h4-fw: 600;
  --body-lg-size: 18px;  --body-lg-lh: 1.55;
  --body-size: 16px;     --body-lh: 1.6;
  --body-sm-size: 14px;  --body-sm-lh: 1.55;
  --caption-size: 13px;  --caption-lh: 1.45;
  --eyebrow-size: 12px;  --eyebrow-lh: 1.2;   /* mono, uppercase, wide */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-display {
  font-family: var(--font-sans); font-weight: var(--display-fw);
  font-size: var(--display-size); line-height: var(--display-lh);
  letter-spacing: var(--display-ls); color: var(--fg-1);
}
.t-h1 { font-family: var(--font-sans); font-weight: var(--h1-fw); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); color: var(--fg-1); }
.t-h2 { font-family: var(--font-sans); font-weight: var(--h2-fw); font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); color: var(--fg-1); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--h3-fw); font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); color: var(--fg-1); }
.t-h4 { font-family: var(--font-sans); font-weight: var(--h4-fw); font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); color: var(--fg-1); }

.t-body-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--body-lg-size); line-height: var(--body-lg-lh); color: var(--fg-2); }
.t-body    { font-family: var(--font-sans); font-weight: 400; font-size: var(--body-size); line-height: var(--body-lh); color: var(--fg-2); }
.t-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--fg-2); }
.t-caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--fg-3); }

/* Mono — the brand's "technical voice": labels, IPs, ping, server names */
.t-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--body-sm-size); line-height: 1.5; color: var(--fg-2); font-feature-settings: 'ss01'; }
.t-eyebrow {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-lh); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--accent-fg);
}

/* ============================================================
   OPTIONAL BASE RESET (apply via .revan-root on a wrapper)
   ============================================================ */
.revan-root {
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}