/* ============================================================
   Vector AI Design System — Tokens
   Source: SB Vector.fig (pitch deck, 1920×1080)
   ============================================================ */

/* ---- Fonts (substitutes flagged; LCT-Ciburial is licensed) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* If you have the licensed family, drop it into fonts/ and uncomment: */
/*
@font-face {
  font-family: 'LCT-Ciburial';
  src: url('./fonts/LCTCiburial-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
*/

:root {
  /* ---- Core brand colors ---- */
  --vai-navy:        #001144;   /* primary. text on light, dark fills */
  --vai-blue:        #0022FF;   /* accent. current-state, link-equivalent */
  --vai-navy-deep:   #000A36;   /* navy hover/press */
  --vai-blue-deep:   #001BCC;   /* blue hover/press */

  /* ---- Surfaces ---- */
  --vai-white:       #FFFFFF;   /* canvas */
  --vai-offwhite:    #F4F4F4;   /* standard card bg */
  --vai-black:       #000000;   /* rare; only for hero display words */

  /* ---- Text (on light) ---- */
  --vai-fg:          #001144;             /* = navy */
  --vai-fg-2:        rgba(0, 17, 68, 0.6); /* secondary body */
  --vai-fg-3:        rgba(0, 17, 68, 0.2); /* tertiary / placeholder */
  --vai-fg-on-dark:  #FFFFFF;

  /* ---- Semantics ---- */
  --vai-success:     #28BD7B;   /* done, ✓ */
  --vai-alert:       #FF4444;   /* blocker, red flag */

  /* ---- Chart / accent tints (rare) ---- */
  --vai-blue-700:    #0B27DA;
  --vai-blue-500:    #4D62E6;
  --vai-blue-300:    #8695F9;
  --vai-blue-100:    rgba(0, 34, 255, 0.4);
  --vai-blue-050:    rgba(0, 34, 255, 0.08);

  /* ---- Type families ---- */
  --vai-serif:   'LCT-Ciburial', 'Newsreader', 'Iowan Old Style', 'Georgia', serif;
  --vai-sans:    'Inter Display', 'Inter', system-ui, -apple-system, sans-serif;
  --vai-mono:    'Fragment Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---- Type scale (source: deck) ---- */
  --vai-fs-hero:     100px;
  --vai-fs-title:    60px;
  --vai-fs-h2:       44px;
  --vai-fs-h3:       39px;
  --vai-fs-h4:       28px;
  --vai-fs-label:    22px;
  --vai-fs-body:     18px;
  --vai-fs-meta:     14px;

  /* ---- Line-heights ---- */
  --vai-lh-display:  0.92;
  --vai-lh-title:    1.1;
  --vai-lh-label:    1.2;
  --vai-lh-body:     1.4;

  /* ---- Letter-spacing ---- */
  --vai-ls-hero:     -0.04em;
  --vai-ls-title:    -0.03em;
  --vai-ls-label:    -0.02em;
  --vai-ls-body:     0;

  /* ---- Radius ---- */
  --vai-r-0:   0px;
  --vai-r-1:   4px;
  --vai-r-2:   8px;   /* default card */
  --vai-r-full: 32px; /* pills */

  /* ---- Spacing (4pt) ---- */
  --vai-s-1:   4px;
  --vai-s-2:   8px;
  --vai-s-3:   12px;
  --vai-s-4:   16px;
  --vai-s-5:   20px;
  --vai-s-6:   32px;
  --vai-s-7:   40px;
  --vai-s-8:   60px;

  /* ---- Frame (slide) ---- */
  --vai-slide-w:   1920px;
  --vai-slide-h:   1080px;
  --vai-header-h:  102px;
  --vai-footer-h:  97px;

  /* ---- Motion ---- */
  --vai-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --vai-dur:       200ms;
}

/* ============================================================
   Semantic element styles — use these as defaults
   ============================================================ */

.vai-hero {
  font-family: var(--vai-serif);
  font-size: var(--vai-fs-hero);
  line-height: var(--vai-lh-display);
  letter-spacing: var(--vai-ls-hero);
  color: var(--vai-black);
}
.vai-title {
  font-family: var(--vai-serif);
  font-size: var(--vai-fs-title);
  line-height: var(--vai-lh-display);
  letter-spacing: var(--vai-ls-title);
  color: var(--vai-navy);
}
.vai-h3 {
  font-family: var(--vai-serif);
  font-size: var(--vai-fs-h3);
  line-height: var(--vai-lh-title);
  letter-spacing: var(--vai-ls-title);
  color: var(--vai-navy);
}
.vai-h4 {
  font-family: var(--vai-serif);
  font-size: var(--vai-fs-h4);
  line-height: var(--vai-lh-label);
  letter-spacing: var(--vai-ls-label);
  color: var(--vai-navy);
}
.vai-label {
  font-family: var(--vai-serif);
  font-size: var(--vai-fs-label);
  line-height: var(--vai-lh-label);
  letter-spacing: var(--vai-ls-label);
}
.vai-body {
  font-family: var(--vai-sans);
  font-size: var(--vai-fs-body);
  line-height: var(--vai-lh-body);
  color: var(--vai-fg-2);
}
.vai-meta {
  font-family: var(--vai-serif);
  font-size: var(--vai-fs-meta);
  line-height: var(--vai-lh-label);
  letter-spacing: var(--vai-ls-label);
  color: var(--vai-fg-2);
}
.vai-mono {
  font-family: var(--vai-mono);
  font-size: 18px;
  line-height: 0.92;
  letter-spacing: -0.03em;
}

/* ---- Card ---- */
.vai-card {
  background: var(--vai-offwhite);
  border-radius: var(--vai-r-2);
  padding: var(--vai-s-4);
}
.vai-card--nested {
  background: var(--vai-white);
}

/* ---- Pill / tag ---- */
.vai-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 14px 6px;
  border-radius: var(--vai-r-full);
  font-family: var(--vai-serif);
  font-size: var(--vai-fs-label);
  letter-spacing: var(--vai-ls-label);
  line-height: var(--vai-lh-label);
  background: var(--vai-navy); color: var(--vai-white);
  transition: background var(--vai-dur) var(--vai-ease);
}
.vai-pill--active  { background: var(--vai-blue); }
.vai-pill--success { background: var(--vai-success); }
.vai-pill--alert   { background: var(--vai-alert); }
.vai-pill--ghost   { background: var(--vai-offwhite); color: var(--vai-navy); }
.vai-pill:hover    { background: var(--vai-navy-deep); }
.vai-pill--active:hover { background: var(--vai-blue-deep); }

/* ---- Logo block (canonical — matches Group 8 ref) ---- */
.vai-logo { display: inline-flex; align-items: stretch; line-height: 1; }
.vai-logo__mark {
  background: var(--vai-navy);
  color: var(--vai-white);
  font-family: var(--vai-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  padding: 6px 12px 8px;
  border-radius: 6px;
  line-height: 1;
}
.vai-logo__tag {
  background: var(--vai-blue);
  color: var(--vai-white);
  font-family: var(--vai-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  padding: 6px 12px 8px;
  border-radius: 999px;
  margin-left: -2px;
  line-height: 1;
}
/* Sizes (apply via modifier) */
.vai-logo--sm .vai-logo__mark, .vai-logo--sm .vai-logo__tag { font-size: 16px; padding: 5px 10px 7px; }
.vai-logo--md .vai-logo__mark, .vai-logo--md .vai-logo__tag { font-size: 22px; padding: 6px 12px 8px; }
.vai-logo--lg .vai-logo__mark, .vai-logo--lg .vai-logo__tag { font-size: 28px; padding: 8px 14px 10px; }