/* ============================================================
   nsai — Colors & Type
   Core design tokens. Import this file in any nsai artifact.
   ============================================================ */

/* Poppins + Lora loaded locally from fonts/ (brand-provided TTFs). */

@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; src: url('fonts/Lora-VariableFont_wght.ttf') format('truetype-variations'); font-display: swap; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400 700; src: url('fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype-variations'); font-display: swap; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; src: url('fonts/Lora-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; src: url('fonts/Lora-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; src: url('fonts/Lora-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 500; src: url('fonts/Lora-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; src: url('fonts/Lora-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 600; src: url('fonts/Lora-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; src: url('fonts/Lora-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 700; src: url('fonts/Lora-BoldItalic.ttf') format('truetype'); font-display: swap; }

@font-face { font-family: 'Poppins'; font-style: normal;  font-weight: 100; src: url('fonts/Poppins-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic;  font-weight: 100; src: url('fonts/Poppins-ThinItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal;  font-weight: 200; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic;  font-weight: 200; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal;  font-weight: 300; src: url('fonts/Poppins-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic;  font-weight: 300; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal;  font-weight: 400; src: url('fonts/Poppins-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic;  font-weight: 400; src: url('fonts/Poppins-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal;  font-weight: 500; src: url('fonts/Poppins-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic;  font-weight: 500; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal;  font-weight: 600; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic;  font-weight: 600; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal;  font-weight: 700; src: url('fonts/Poppins-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic;  font-weight: 700; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal;  font-weight: 800; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic;  font-weight: 800; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal;  font-weight: 900; src: url('fonts/Poppins-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic;  font-weight: 900; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); font-display: swap; }

:root {
  /* ---------- Brand colors ---------- */
  --blue-primary: #3151cb;   /* Dominant accent — CTAs, titles, logo, key UI */
  --blue-light:   #6b6fc7;   /* Secondary — gradients, icons, secondary bg */
  --dark:         #2C2C2C;   /* Body text, dark backgrounds */
  --cream:        #F5F0EB;   /* Primary light background */
  --white:        #ffffff;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1: var(--dark);                      /* primary text */
  --fg-2: #555555;                          /* secondary text */
  --fg-3: #888888;                          /* tertiary / meta */
  --fg-inv: var(--white);                   /* text on dark/blue */
  --fg-accent: var(--blue-primary);         /* links, eyebrows */

  --bg-1: var(--cream);                     /* canvas */
  --bg-2: var(--white);                     /* cards */
  --bg-3: #EDE6DE;                          /* cream-deep, subtle section */
  --bg-dark: var(--dark);
  --bg-accent: var(--blue-primary);

  --border-soft: rgba(44, 44, 44, 0.08);
  --border-rule: rgba(49, 81, 203, 0.12);   /* 12% blue divider */

  /* ---------- Gradients ---------- */
  --grad-brand: linear-gradient(135deg, #3151cb 0%, #6b6fc7 100%);
  --grad-logo:  linear-gradient(90deg, #3151cb 0%, #6b6fc7 100%);
  --grad-photo-overlay: linear-gradient(135deg, rgba(49,81,203,0.45) 0%, rgba(44,44,44,0.65) 100%);

  /* ---------- Shadows ---------- */
  --shadow-card: 0 4px 20px rgba(49, 81, 203, 0.07);
  --shadow-card-hover: 0 8px 28px rgba(49, 81, 203, 0.12);
  --shadow-lift: 0 12px 40px rgba(44, 44, 44, 0.12);

  /* ---------- Radii ---------- */
  --radius-xs: 4px;   /* tags, inline chips */
  --radius-sm: 8px;   /* buttons, inputs */
  --radius-md: 12px;
  --radius-lg: 16px;  /* cards */
  --radius-xl: 24px;

  /* ---------- Spacing (8px grid) ---------- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 80px;

  /* ---------- Layout ---------- */
  --content-max: 960px;

  /* ---------- Typefaces ---------- */
  --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-lora:    'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:    'Courier New', ui-monospace, Menlo, monospace;

  --font-display: var(--font-poppins);
  --font-heading: var(--font-poppins);
  --font-body:    var(--font-lora);
  --font-ui:      var(--font-poppins);

  /* ---------- Type scale ---------- */
  --fs-display: 72px;     /* 64–80 */
  --fs-h1: 48px;          /* 40–52 */
  --fs-h2: 32px;          /* 28–36 */
  --fs-h3: 20px;          /* 18–22 */
  --fs-eyebrow: 11px;
  --fs-body: 16px;        /* 15–17 */
  --fs-body-lg: 18px;
  --fs-caption: 12px;
  --fs-code: 12px;

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.75;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Semantic element defaults
   ============================================================ */

.nsai, body.nsai {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nsai h1, .nsai .h1,
.nsai h2, .nsai .h2,
.nsai h3, .nsai .h3 {
  font-family: var(--font-heading);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.nsai .display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}

.nsai h1, .nsai .h1 {
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: -0.015em;
}

.nsai h2, .nsai .h2 {
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
}

.nsai h3, .nsai .h3 {
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.nsai .eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fg-accent);
}

.nsai p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 1em;
}

.nsai .lede,
.nsai .intro {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-style: italic;
  line-height: 1.7;
  color: var(--fg-2);
}

.nsai .caption,
.nsai small {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.nsai code, .nsai .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  color: var(--fg-1);
}

.nsai a {
  color: var(--fg-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.nsai a:hover { opacity: 0.72; }

/* ============================================================
   Utility classes
   ============================================================ */

.nsai .card {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.nsai .rule {
  height: 1px;
  background: var(--border-rule);
  border: 0;
}

.nsai .tag {
  display: inline-block;
  background: var(--blue-primary);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
}

.nsai .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
  text-decoration: none;
}
.nsai .btn-primary {
  background: var(--blue-primary);
  color: var(--white);
}
.nsai .btn-primary:hover { background: #2843b0; }
.nsai .btn-primary:active { transform: translateY(1px); }

.nsai .btn-secondary {
  background: transparent;
  color: var(--blue-primary);
  border: 2px solid var(--blue-primary);
  padding: 10px 22px;
}
.nsai .btn-secondary:hover { background: rgba(49,81,203,0.06); }

.nsai .photo-overlay {
  position: relative;
  isolation: isolate;
}
.nsai .photo-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-photo-overlay);
  z-index: 1;
}
.nsai .photo-overlay > * { position: relative; z-index: 2; }