/* ==========================================================================
   VAAS — Colors & Type
   --------------------------------------------------------------------------
   The foundation layer. Import this anywhere VAAS brand styling is needed.

   Fonts: TT Interphases Pro is the official VAAS brand typeface (trial
   weights supplied — request licensed files for production). JetBrains Mono
   is used for numeric / code contexts only.
   ========================================================================== */

@font-face { font-family: 'TT Interphases Pro'; src: url('./fonts/TTInterphasesPro-Thin.ttf')       format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Interphases Pro'; src: url('./fonts/TTInterphasesPro-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Interphases Pro'; src: url('./fonts/TTInterphasesPro-Light.ttf')      format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Interphases Pro'; src: url('./fonts/TTInterphasesPro-Regular.ttf')    format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Interphases Pro'; src: url('./fonts/TTInterphasesPro-Medium.ttf')     format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Interphases Pro'; src: url('./fonts/TTInterphasesPro-DemiBold.ttf')   format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Interphases Pro'; src: url('./fonts/TTInterphasesPro-Bold.ttf')       format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Core palette -------------------------------------------- */
  --vaas-blue:           #0434f4; /* vibrant blue — CTAs, titles, highlights */
  --vaas-blue-deep:      #000b58; /* deep blue — structure, body copy */
  --vaas-lime:           #cdff29; /* lime yellow — accent, positive alerts */

  /* Light supports */
  --vaas-blue-tint:      #dfecff; /* very light blue — secondary bg */
  --vaas-gray-50:        #f6f6f6; /* neutral bg */
  --vaas-white:          #ffffff;

  /* Dark supports */
  --vaas-gray-700:       #2a2b2b; /* secondary text */
  --vaas-black:          #1a181b; /* primary text / deep bg */

  /* ---------- Derived tints (used sparingly) -------------------------- */
  --vaas-blue-10:        #e6ebff;
  --vaas-blue-20:        #c2ccff;
  --vaas-blue-pressed:   #0229c9; /* CTA press */
  --vaas-blue-hover:     #0a3dff; /* CTA hover (barely lighter) */
  --vaas-lime-pressed:   #b7e520;

  /* ---------- Semantic color tokens ----------------------------------- */
  --bg:                  var(--vaas-white);
  --bg-muted:            var(--vaas-gray-50);
  --bg-tint:             var(--vaas-blue-tint);
  --bg-inverse:          var(--vaas-blue-deep);
  --bg-accent:           var(--vaas-blue);

  --fg:                  var(--vaas-black);
  --fg-muted:            var(--vaas-gray-700);
  --fg-inverse:          var(--vaas-white);
  --fg-accent:           var(--vaas-blue);
  --fg-on-accent:        var(--vaas-white);

  --border:              rgba(26, 24, 27, 0.10);
  --border-strong:       rgba(26, 24, 27, 0.22);
  --border-accent:       var(--vaas-blue);

  --success:             var(--vaas-lime); /* positive alerts, ticks */
  --success-fg:          var(--vaas-blue-deep);
  --focus-ring:          color-mix(in oklab, var(--vaas-blue) 35%, transparent);

  /* ---------- Type families ------------------------------------------- */
  --font-display:        'TT Interphases Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:           'TT Interphases Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:           'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---------- Type scale (fluid-ish, px) ------------------------------ */
  --fs-display-xl:       80px;
  --fs-display-lg:       64px;
  --fs-display:          48px;
  --fs-h1:               40px;
  --fs-h2:               32px;
  --fs-h3:               24px;
  --fs-h4:               20px;
  --fs-body-lg:          18px;
  --fs-body:             16px;
  --fs-body-sm:          14px;
  --fs-caption:          12px;
  --fs-micro:            11px;

  /* line heights */
  --lh-tight:            1.02;
  --lh-snug:             1.15;
  --lh-normal:           1.35;
  --lh-relaxed:          1.55;

  /* letter spacing */
  --tr-tight:            -0.02em;
  --tr-snug:             -0.01em;
  --tr-normal:           0;
  --tr-wide:             0.04em;
  --tr-eyebrow:          0.12em;

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

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

  /* ---------- Radii ---------------------------------------------------- */
  /* VAAS reads technical and confident — radii stay tight. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Shadows ------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 11, 88, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 11, 88, 0.08);
  --shadow-md: 0 8px 20px -8px rgba(0, 11, 88, 0.18);
  --shadow-lg: 0 24px 48px -16px rgba(0, 11, 88, 0.24);
  --shadow-focus: 0 0 0 4px var(--focus-ring);

  /* ---------- Motion -------------------------------------------------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;
}

/* ==========================================================================
   Semantic type classes
   Use these instead of raw font-size/weight where possible.
   ========================================================================== */

.vaas-display-xl,
.vaas-display-lg,
.vaas-display,
.vaas-h1, .vaas-h2, .vaas-h3, .vaas-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.vaas-display-xl { font-size: var(--fs-display-xl); }
.vaas-display-lg { font-size: var(--fs-display-lg); }
.vaas-display    { font-size: var(--fs-display); }

.vaas-h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); }
.vaas-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); }
.vaas-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); font-weight: var(--fw-semibold); }
.vaas-h4 { font-size: var(--fs-h4); line-height: var(--lh-normal); font-weight: var(--fw-semibold); letter-spacing: 0; }

.vaas-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.vaas-body-lg, .vaas-body, .vaas-body-sm, .vaas-caption {
  font-family: var(--font-sans);
  color: var(--fg);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.vaas-body-lg { font-size: var(--fs-body-lg); }
.vaas-body    { font-size: var(--fs-body); }
.vaas-body-sm { font-size: var(--fs-body-sm); }
.vaas-caption { font-size: var(--fs-caption); color: var(--fg-muted); }

.vaas-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
}

/* Utility text colors */
.vaas-fg         { color: var(--fg); }
.vaas-fg-muted   { color: var(--fg-muted); }
.vaas-fg-inverse { color: var(--fg-inverse); }
.vaas-fg-accent  { color: var(--fg-accent); }
.vaas-fg-deep    { color: var(--vaas-blue-deep); }