/* ==========================================================================
   Bridge The Gap Engineer — Brand Stylesheet v1.0 (2026-07-12)
   Single source of truth: fonts, color tokens, type scale, brand utilities.
   Spec: brand/docs/btg-brand-tokens.json · guidelines: brand package 09.
   ========================================================================== */

/* ---- Gotham ScreenSmart (web-hinted cuts) ---- */
@font-face { font-family: 'Gotham SSm'; src: url('../brand/fonts/GothamSSm-Book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham SSm'; src: url('../brand/fonts/GothamSSm-BookItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham SSm'; src: url('../brand/fonts/GothamSSm-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham SSm'; src: url('../brand/fonts/GothamSSm-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham SSm'; src: url('../brand/fonts/GothamSSm-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham SSm'; src: url('../brand/fonts/GothamSSm-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham SSm'; src: url('../brand/fonts/GothamSSm-Black.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham SSm'; src: url('../brand/fonts/GothamSSm-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham Ultra'; src: url('../brand/fonts/Gotham-Ultra.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---- Official brand colors (extracted from Assets.ai) ---- */
  --btg-teal: #115155;
  --btg-burgundy: #771C45;
  --btg-gold: #D6B652;      /* accent only — never text on light bg (1.97:1) */
  --btg-mist: #B7CACC;
  --btg-silver: #CECECE;

  /* ---- Teal scale (primary) ---- */
  --primary-50: #F1F5F5;  --primary-100: #E2EAEB; --primary-200: #BCCECF;
  --primary-300: #8DABAD; --primary-400: #548285; --primary-500: #115155;
  --primary-600: #0F474B; --primary-700: #0C3A3D; --primary-800: #092D2F;
  --primary-900: #072022;

  /* ---- Burgundy scale (secondary) ---- */
  --secondary-50: #F7F1F4;  --secondary-100: #EFE4E9; --secondary-200: #D9BFCB;
  --secondary-300: #BE92A6; --secondary-400: #9D5C79; --secondary-500: #771C45;
  --secondary-600: #69193D; --secondary-700: #561432; --secondary-800: #410F26;
  --secondary-900: #300B1C;

  /* ---- Gold scale (accent) ---- */
  --accent-50: #FDFBF5;  --accent-100: #FAF6EA; --accent-200: #F4EBCF;
  --accent-300: #EBDCAC; --accent-400: #E1CA82; --accent-500: #D6B652;
  --accent-600: #BCA048; --accent-700: #9A833B; --accent-800: #76642D;
  --accent-900: #564921;

  /* ---- Semantic ---- */
  --btg-ink: #072022;
  --btg-ink-muted: #3D5B5E;
  --btg-surface: #FFFFFF;
  --btg-surface-tint: #F1F5F5;
  --btg-border: #CECECE;
  --btg-link: #115155;
  --btg-link-hover: #0C3A3D;
  --btg-success: #1E7B4F;
  --btg-warning: #9A833B;
  --btg-danger: #9C2B43;
  --btg-focus: #548285;
  --btg-watermark-opacity: 0.08;

  /* ---- Typography ---- */
  --font-display: 'Gotham SSm', 'Gotham', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Gotham SSm', 'Gotham', -apple-system, 'Segoe UI', Arial, sans-serif;
  --text-display-xl: 3.815rem; /* 61px */
  --text-display: 3.052rem;    /* 49px */
  --text-h1: 2.441rem;         /* 39px */
  --text-h2: 1.953rem;         /* 31px */
  --text-h3: 1.563rem;         /* 25px */
  --text-h4: 1.25rem;          /* 20px */
  --text-body-lg: 1.125rem;    /* 18px */
  --text-body: 1rem;           /* 16px */
  --text-small: 0.875rem;      /* 14px */
  --text-caption: 0.75rem;     /* 12px */

  /* ---- Shape & elevation (teal-tinted ink, never pure black) ---- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(7,32,34,0.08), 0 4px 12px rgba(7,32,34,0.06);
  --shadow-modal: 0 8px 40px rgba(7,32,34,0.18);
}

/* ---- Base typography ---- */
body {
  font-family: var(--font-body);
  color: var(--btg-ink);
  line-height: 1.65;
}
/* Heading scale — :where() keeps zero specificity so Tailwind utilities and
   inherited colors (e.g. text-white heroes) always win. */
:where(h1) { font-size: var(--text-h1); font-weight: 700; line-height: 1.15; }
:where(h2) { font-size: var(--text-h2); font-weight: 700; line-height: 1.2; }
:where(h3) { font-size: var(--text-h3); font-weight: 500; line-height: 1.3; }
:where(h4) { font-size: var(--text-h4); font-weight: 500; line-height: 1.4; }
:where(a:not([class])) { color: var(--btg-link); }
:where(a:not([class])):hover { color: var(--btg-link-hover); }

/* ---- Brand utilities ---- */
.btg-eyebrow {
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--btg-burgundy);
}
.btg-display {
  font-size: clamp(2.441rem, 5vw, var(--text-display-xl));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.btg-gradient-primary { background: linear-gradient(120deg, var(--primary-700), var(--primary-500) 55%, var(--primary-600)); }
.btg-gradient-hero { background: linear-gradient(120deg, #0C3A3D, #115155 55%, #0F474B); }
.btg-pattern-overlay { position: relative; overflow: hidden; }
.btg-pattern-overlay::after {
  content: ''; position: absolute; right: -50px; top: 10px; width: 480px; height: 100%;
  background: url('../brand/pattern/btg-logo-element-pattern-cubes.svg') no-repeat top right / contain;
  opacity: 0.20; pointer-events: none;
  animation: btg-pattern-drift 18s ease-in-out infinite alternate;
}
.btg-watermark {
  position: relative;
}
.btg-watermark::before {
  content: ''; position: absolute; right: -2%; bottom: -2%; width: 60%; height: 60%;
  background: url('../brand/pattern/btg-logo-watermark-bridge.svg') no-repeat bottom right / contain;
  opacity: 0.55; /* silver asset ≈ teal @ 8% */ pointer-events: none;
}

/* ---- Buttons ---- */
.btg-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--btg-teal); color: #fff; font-weight: 500; letter-spacing: 0.02em;
  padding: 0.75rem 1.625rem; border-radius: 8px; border: 0; cursor: pointer;
  min-height: 44px;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btg-btn-primary:hover { background: var(--primary-700); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(7,32,34,.14); }
.btg-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: transparent; color: var(--btg-teal); font-weight: 500; letter-spacing: 0.02em;
  padding: 0.75rem 1.625rem; border-radius: 8px; border: 1.5px solid var(--primary-300); cursor: pointer;
  min-height: 44px;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}
.btg-btn-secondary:hover { border-color: var(--btg-teal); color: var(--primary-700); transform: translateY(-2px); background: var(--primary-50); }
.btg-btn-cta { background: var(--btg-burgundy); color: #fff; }
.btg-btn-cta:hover { background: var(--secondary-700); color: #fff; }

/* ---- Professional motion primitives ---- */
.btg-reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: btg-reveal-in .45s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-play-state: paused;
}
.btg-reveal.is-visible { animation-play-state: running; }
.btg-stagger > * { opacity: 0; transform: translateY(12px); animation: btg-reveal-in .4s cubic-bezier(.22, .61, .36, 1) forwards; }
.btg-stagger > *:nth-child(1) { animation-delay: 60ms; }
.btg-stagger > *:nth-child(2) { animation-delay: 110ms; }
.btg-stagger > *:nth-child(3) { animation-delay: 160ms; }
.btg-stagger > *:nth-child(4) { animation-delay: 210ms; }
.btg-stagger > *:nth-child(n+5) { animation-delay: 250ms; }
.btg-lift { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.btg-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-card), 0 12px 28px rgba(7,32,34,.08); }
.btg-empty-state { border: 1px solid var(--primary-100); background: linear-gradient(145deg, #fff, var(--primary-50)); border-radius: var(--radius-lg); padding: 2.5rem 1.5rem; text-align: center; }
.btg-empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--primary-100); color: var(--btg-teal); margin-bottom: .875rem; }
@keyframes btg-reveal-in { to { opacity: 1; transform: translateY(0); } }
@keyframes btg-pattern-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-10px, 6px, 0) scale(1.03); } }

/* ---- Focus visibility ---- */
:focus-visible { outline: 2px solid var(--btg-focus); outline-offset: 2px; }

/* ---- Loading spinner (brand) ---- */
.btg-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid var(--primary-100); border-top-color: var(--btg-teal);
  animation: btg-spin .8s linear infinite;
}
.btg-spinner--gold { border-color: rgba(214,182,82,.25); border-top-color: var(--btg-gold); }
@keyframes btg-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .btg-reveal, .btg-stagger > * { opacity: 1; transform: none; animation-play-state: running; }
}

/* ---- Selection ---- */
::selection { background: var(--primary-200); color: var(--primary-900); }