/*
  bbaglobal.in design tokens and buttons, shared by the nav and hero components.
  Values mirror site-src/src/styles/tokens.css on the main site.
*/

@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin-wght.woff2") format("woff2-variations"), url("../fonts/manrope-latin-wght.woff2") format("woff2");
}

:root {
  --bba-font: "Manrope Variable", "Manrope", Inter, Arial, sans-serif;
  --bba-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --bba-paper: #fafaf8;
  --bba-surface: #f3f3f0;
  --bba-card: #ffffff;
  --bba-ink: #1d1d1f;
  --bba-muted: #5a5a5e;
  --bba-line: #e7e7e3;
  /* Outline-button border: 3.3:1 on paper. */
  --bba-line-strong: #8a8a8e;
  /* The blue from the BBA logo, and a darker shade that passes 4.5:1 as small text on paper. */
  --bba-accent: #3aa8f0;
  --bba-accent-ink: #166aa6;
  --bba-on-accent: #ffffff;
  --bba-error: #b3261e;

  --bba-btn-bg: #1d1d1f;
  --bba-btn-bg-hover: #000000;
  --bba-btn-text: #ffffff;
  --bba-focus: #1d1d1f;

  /* Page rhythm, as on the main site: section padding 64px → 96px, heading to content 40px → 56px. */
  --space-section: clamp(4rem, 2.9rem + 3.4vw, 6rem);
  --space-intro: clamp(2.5rem, 2.05rem + 1.4vw, 3.5rem);

  /* The page's one dark section (Why BBA), as on the main site. Muted text passes 4.5:1 on both backgrounds. */
  --dark-bg: #111112;
  --dark-surface: rgba(255, 255, 255, 0.04);
  --dark-line: rgba(255, 255, 255, 0.12);
  --dark-text: #f5f5f7;
  --dark-muted: #b0b0b6;
  --dark-accent: #3aa8f0;

  /* Footer: a calm neutral, distinct from the dark Why BBA section and the Contact surface above it. */
  --ft-bg: #ecebe6;
  --ft-muted: #56565a;

  --nav-h-top: 72px;
  --nav-h-solid: 64px;
  --nav-bg-solid: rgba(250, 250, 248, 0.94);
  --nav-shadow: 0 6px 24px -12px rgba(17, 17, 17, 0.18);
}

@media (min-width: 1024px) {
  :root {
    --nav-h-top: 80px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bba-paper: #141414;
    --bba-surface: #1c1c1e;
    --bba-card: #1c1c1e;
    --bba-ink: #f5f5f7;
    --bba-muted: #a1a1a6;
    --bba-line: #2c2c2e;
    --bba-line-strong: #6e6e73;
    --bba-accent: #3aa8f0;
    --bba-accent-ink: #3aa8f0;
    --bba-on-accent: #111112;
    --bba-error: #ff8a80;

    --bba-btn-bg: #f5f5f7;
    --bba-btn-bg-hover: #ffffff;
    --bba-btn-text: #111112;
    --bba-focus: #f5f5f7;

    /* On a dark page the section steps up to an elevated, slightly blue surface so it still stands apart. */
    --dark-bg: #1c1f26;
    --ft-bg: #242427;
    --ft-muted: #a8a8ad;

    --nav-bg-solid: rgba(20, 20, 20, 0.92);
    --nav-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.6);
  }
}

/* Base: the few resets the components rely on (the page no longer loads Tailwind's). */
*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bba-paper);
  color: var(--bba-ink);
  font: 16px/1.5 var(--bba-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, blockquote, figure, dl, dd, fieldset {
  margin: 0;
}

h1, h2, h3, h4 {
  font-size: inherit;
  font-weight: inherit;
}

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg {
  display: block;
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: inherit;
}

button, input, select {
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

fieldset {
  padding: 0;
}

/* Anchored sections stop below the solid nav instead of under it. */
main > section[id] {
  scroll-margin-top: var(--nav-h-solid);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* Buttons: primary (solid) and secondary (outline), as on bbaglobal.in. */
.bba-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--bba-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.bba-btn:focus-visible {
  outline: 2px solid var(--bba-focus);
  outline-offset: 4px;
}

.bba-btn--primary {
  background: var(--bba-btn-bg);
  color: var(--bba-btn-text);
}

.bba-btn--primary:hover {
  background: var(--bba-btn-bg-hover);
}

.bba-btn--secondary {
  background: transparent;
  border-color: var(--bba-line-strong);
  color: var(--bba-ink);
}

.bba-btn--secondary:hover {
  border-color: var(--bba-ink);
}

.bba-btn--sm {
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 10px;
  font-size: 14px;
}

@media (min-width: 1024px) {
  .bba-btn--sm {
    min-height: 40px;
  }
}