/* =====================================================================
   VXIT Design System — Foundations
   Colors + Typography tokens. Import this once per page.
   ===================================================================== */

/* ---------- Fonts (subset: Regular / Medium / SemiBold / Bold / ExtraBold / Black) ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Barlow-Regular.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Barlow-Medium.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Barlow-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Barlow-Bold.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Barlow-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Barlow-Black.ttf") format("truetype"); }

:root {
  /* =====================================================================
     COLORS — primary brand palette from VXIT Brand Guidelines
     ===================================================================== */

  /* Primary — the "base color choices" used most aggressively */
  --vxit-orange:        #F26322;  /* PMS 158 C — heat / hustle */
  --vxit-pink:          #DA138D;  /* PMS 239 C — magenta highlight */
  --vxit-magenta-dark:  #993467;  /* PMS 682 C — accent / divider pink */
  --vxit-black:         #010202;  /* near-black — primary background */

  /* Neutral scale — gray ramp from the secondary palette */
  --vxit-gray-900: #010202;       /* same as --vxit-black */
  --vxit-gray-700: #717070;       /* PMS 430 — body on light */
  --vxit-gray-500: #9A9C9E;       /* interpolated */
  --vxit-gray-300: #BBBDBF;       /* PMS 429 — divider / disabled */
  --vxit-gray-100: #F9FAFA;       /* PMS 428 — paper */
  --vxit-white:    #FFFFFF;

  /* The signature brand gradient — orange → pink, left-to-right */
  --vxit-gradient: linear-gradient(90deg, #F26322 0%, #F04F4F 35%, #DA138D 75%, #993467 100%);
  --vxit-gradient-diag: linear-gradient(135deg, #F26322 0%, #DA138D 70%, #993467 100%);
  --vxit-gradient-radial: radial-gradient(ellipse at 20% 50%, #F26322 0%, #DA138D 65%, #993467 100%);

  /* =====================================================================
     SEMANTIC SURFACES + INK — what apps should reference, not raw hexes
     ===================================================================== */
  --bg:          var(--vxit-black);     /* default surface — black per guidelines */
  --bg-elev-1:   #141414;
  --bg-elev-2:   #1F1F1F;
  --bg-paper:    var(--vxit-gray-100);  /* light-mode surface */
  --bg-paper-2:  var(--vxit-white);

  --fg:          var(--vxit-white);     /* primary text on dark */
  --fg-muted:    var(--vxit-gray-300);
  --fg-subtle:   var(--vxit-gray-500);
  --fg-on-light: var(--vxit-black);
  --fg-on-light-muted: var(--vxit-gray-700);

  --accent:      var(--vxit-pink);
  --accent-hot:  var(--vxit-orange);
  --accent-deep: var(--vxit-magenta-dark);

  --border:      rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.22);
  --border-on-light: rgba(1,2,2,0.10);
  --border-on-light-strong: rgba(1,2,2,0.20);

  /* Status — derived to stay in palette */
  --success: #2BB673;
  --warning: #F2A422;
  --danger:  #E53935;
  --info:    #2A8FE3;

  /* =====================================================================
     TYPOGRAPHY
     ===================================================================== */
  --font-sans:    "Barlow", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Barlow", system-ui, sans-serif;   /* same family, heavier */
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights — VXIT favors big BLACK headlines paired with REGULAR body */
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Type scale — based on a 1.25 ratio, then expanded for hero scale */
  --fs-12: 0.75rem;   /* 12px — micro / eyebrow */
  --fs-14: 0.875rem;  /* 14px — meta */
  --fs-16: 1rem;      /* 16px — body */
  --fs-18: 1.125rem;  /* 18px — lead */
  --fs-20: 1.25rem;   /* 20px — body-large */
  --fs-24: 1.5rem;    /* 24px — h5 / overline-cap */
  --fs-32: 2rem;      /* 32px — h4 */
  --fs-40: 2.5rem;    /* 40px — h3 */
  --fs-56: 3.5rem;    /* 56px — h2 */
  --fs-72: 4.5rem;    /* 72px — h1 */
  --fs-96: 6rem;      /* 96px — display */
  --fs-128: 8rem;     /* 128px — hero / billboard */

  --lh-tight:   1.02;
  --lh-snug:    1.12;
  --lh-normal:  1.45;
  --lh-loose:   1.7;

  /* Letter spacing — VXIT wordmark uses very wide tracking on caps */
  --ls-display:  -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-wider:    0.14em;   /* used on "STRATEGY | SECURITY | SUPPORT" lockup */
  --ls-widest:   0.22em;   /* used on eyebrows / section labels */

  /* =====================================================================
     SPACING — 4px base
     ===================================================================== */
  --s-0:  0;
  --s-1:  0.25rem;   /* 4 */
  --s-2:  0.5rem;    /* 8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  2.5rem;    /* 40 */
  --s-8:  3rem;      /* 48 */
  --s-9:  4rem;      /* 64 */
  --s-10: 5rem;      /* 80 */
  --s-11: 6rem;      /* 96 */
  --s-12: 8rem;      /* 128 */

  /* =====================================================================
     RADII — VXIT is squared-off. Sharp by default, modest rounding on UI.
     ===================================================================== */
  --r-0:    0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-pill: 999px;

  /* =====================================================================
     ELEVATION
     ===================================================================== */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.18);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.20);
  --shadow-3: 0 12px 36px rgba(0,0,0,0.28);
  --shadow-hot: 0 8px 28px rgba(242, 99, 34, 0.25);
  --shadow-pink: 0 8px 28px rgba(218, 19, 141, 0.28);

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

/* =====================================================================
   SEMANTIC TYPE CLASSES
   ===================================================================== */
.vx-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3.5rem, 8vw, var(--fs-128));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.vx-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 5.5vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.vx-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(2rem, 4vw, var(--fs-56));
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
.vx-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
}
.vx-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
}
.vx-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
}
.vx-lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
}
.vx-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
}
.vx-meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}
/* Eyebrow / overline — all-caps section labels, used heavily in the deck:
   "OUR PHILOSOPHY", "OUR FOUNDERS", "ABOUT US", "OUR PROCESS", "OUR CULTURE" */
.vx-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-14);
  line-height: 1;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.vx-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
}

/* =====================================================================
   UTILITY: gradient text + gradient backgrounds
   ===================================================================== */
.vx-grad-text {
  background: var(--vxit-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.vx-grad-bg {
  background: var(--vxit-gradient);
  color: var(--vxit-white);
}

/* The vertical pink rule used between words in lockups like
   "STRATEGY | SECURITY | SUPPORT" and "VXIT | LIGHT BRAND GUIDELINES". */
.vx-pipe {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: var(--vxit-pink);
  vertical-align: -0.05em;
  margin: 0 0.5em;
}