/* ============================================================
   Yah Digital — Brand System   style.css
   @font-face · tokens · dark / light themes · type · buttons
   ============================================================ */

/* --- Web Fonts ----------------------------------------------- */
@font-face {
  font-family: 'Helvetica Now';
  src: url('../fonts/helvetica-now-display-regular.woff2') format('woff2'),
       url('../fonts/helvetica-now-display-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Now';
  src: url('../fonts/helvetica-now-display-bold.woff2') format('woff2'),
       url('../fonts/helvetica-now-display-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Now';
  src: url('../fonts/helvetica-now-display-black.woff2') format('woff2'),
       url('../fonts/helvetica-now-display-black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- Design Tokens ------------------------------------------- */
:root {
  /* Brand red (theme-agnostic) */
  --yah-primary:       #B42318;
  --yah-primary-rgb:   180, 35, 24;
  --yah-primary-light: #D92D20;
  --yah-primary-dark:  #912018;

  /* Light neutral scale (theme-agnostic — used by light-surface buttons) */
  --yah-light-1: #E3E8EF;
  --yah-light-2: #EEF2F6;
  --yah-light-3: #F8FAFC;
  --yah-light-4: #FCFCFD;

  /* Transitions */
  --yah-transition:       0.4s ease;
  --yah-transition-fast:  0.2s ease;
  --yah-theme-transition: 0.35s ease;

  /* Border radius */
  --yah-radius-sm: 12px;
  --yah-radius:    12px;
  --yah-radius-lg: 12px;

  /* Nav offsets for fixed navigation */
  --navy-offset: calc(1.5rem + 72px);
  --nav-offset:  calc(55px);

  /* --------------------------------------------------------
     Spacing system — single source of truth.
     Aligned to Bootstrap's spacer rhythm (0 / .25 / .5 / 1 / 1.5 / 3rem)
     so design tokens and Bootstrap spacer utilities share one scale.
     -------------------------------------------------------- */
  --phi: 1.618;
  --space-xs:  0.25rem; /* bs-1 */
  --space-sm:  0.5rem;  /* bs-2 */
  --space-md:  1rem;    /* bs-3 (base) */
  --space-lg:  1.5rem;  /* bs-4 */
  --space-xl:  3rem;    /* bs-5 */
  --space-2xl: 4.5rem;  /* 1.5× bs-5 */

  /* Semantic spacing control points (global knobs) */
  --container-gutter: 1.3rem;
  --grid-gutter:      1.3rem;
  --section-space-y:  3rem;
  --block-gap:        1.3rem;
  --card-padding:     1.3rem;

  /* Geometric type scale — r = 2^(1/3) ≈ 1.2599 (doubles every 3 steps) */
  --text-xs:   0.630rem;
  --text-sm:   0.794rem;
  --text-base: 1.1rem;
  --text-md:   1.260rem;
  --text-lg:   1.587rem;
  --text-xl:   2rem;
  --text-2xl:  2.520rem;
  --text-3xl:  3.175rem;
  --text-4xl:  4rem;

  /* Line-height scale — tightened for Helvetica display */
  --leading-tight:   1.0;
  --leading-snug:    1.15;
  --leading-normal:  1.382;
  --leading-relaxed: 1.618; /* φ — body copy */
  --leading-loose:   1.75;

  /* Elevation — quiet, well-spread black shadows (theme-agnostic) */
  --yah-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.08);
  --yah-shadow:    0 10px 28px rgba(0, 0, 0, 0.10);
  --yah-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.14);
  --bs-box-shadow-sm: var(--yah-shadow-sm);
  --bs-box-shadow:    var(--yah-shadow);
  --bs-box-shadow-lg: var(--yah-shadow-lg);

  /* Typography — Helvetica Now display · SAGE type controls */
  --bs-font-sans-serif:      'Helvetica Now', 'Helvetica Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bs-body-font-size:       0.98rem;
  --bs-headings-font-weight: 700;
  --type-ratio: 1.23;

  --fs-h6: var(--bs-body-font-size);
  --fs-h5: calc(var(--fs-h6) * var(--type-ratio));
  --fs-h4: calc(var(--fs-h5) * var(--type-ratio));
  --fs-h3: calc(var(--fs-h4) * var(--type-ratio));
  --fs-h2: calc(var(--fs-h3) * var(--type-ratio));
  --fs-h1: calc(var(--fs-h2) * var(--type-ratio));
}

/* --- Dark theme (primary / default) -------------------------- */
[data-bs-theme="dark"] {
  --yah-bg-body:       #0D121C;
  --yah-bg-surface-1:  #121926;
  --yah-bg-surface-2:  #202939;
  --yah-border:        #364152;
  --yah-border-strong: #4B5565;
  --yah-body-color:    #FFFFFF;
  --yah-body-bg:       var(--yah-bg-body);
  --yah-muted:         #FCFCFD;

  /* Legacy aliases */
  --yah-white:      #FFFFFF;
  --yah-off-white:  var(--yah-muted);
  --yah-light:      var(--yah-bg-surface-2);
  --yah-gray:       rgba(252, 252, 253, 0.65);
  --yah-dark:       var(--yah-bg-body);
  --yah-bg-white:   var(--yah-bg-surface-1);
  --yah-bg-off-white: var(--yah-bg-surface-2);
  --yah-bg-pale:    var(--yah-bg-surface-2);
  --yah-bg-primary: var(--yah-primary-light);
  --yah-bg-dark:    var(--yah-bg-body);

  /* Nav background (rgb tuple for alpha blending) */
  --yah-nav-bg-rgb: 13, 18, 28;

  /* Bootstrap surface overrides */
  --bs-body-bg:                  var(--yah-bg-body);
  --bs-body-color:               var(--yah-body-color);
  --bs-border-color:             var(--yah-border);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.18);
  --bs-secondary-bg:             var(--yah-bg-surface-1);
  --bs-tertiary-bg:              var(--yah-bg-surface-2);
  --bs-secondary-color:          var(--yah-muted);
  --bs-tertiary-color:           rgba(252, 252, 253, 0.65);
  --bs-link-color:               var(--yah-body-color);
  --bs-link-hover-color:         var(--yah-primary-light);
  --bs-emphasis-color:           var(--yah-body-color);
  --bs-heading-color:            var(--yah-body-color);
}

/* --- Light theme --------------------------------------------- */
[data-bs-theme="light"] {
  --yah-bg-body:       #FCFCFD;
  --yah-bg-surface-1:  #F8FAFC;
  --yah-bg-surface-2:  #EEF2F6;
  --yah-border:        #E3E8EF;
  --yah-border-strong: #CDD5DF;
  --yah-body-color:    #0D121C;
  --yah-body-bg:       var(--yah-bg-body);
  --yah-muted:         #4B5565;

  /* Legacy aliases (inverted) */
  --yah-white:      var(--yah-bg-body);
  --yah-off-white:  var(--yah-bg-surface-1);
  --yah-light:      var(--yah-bg-surface-2);
  --yah-gray:       rgba(13, 18, 28, 0.65);
  --yah-dark:       var(--yah-body-color);
  --yah-bg-white:   var(--yah-bg-surface-1);
  --yah-bg-off-white: var(--yah-bg-surface-2);
  --yah-bg-pale:    var(--yah-bg-surface-2);
  --yah-bg-primary: var(--yah-primary-light);
  --yah-bg-dark:    #0D121C;

  /* Nav background (rgb tuple for alpha blending) */
  --yah-nav-bg-rgb: 252, 252, 253;

  /* Bootstrap surface overrides */
  --bs-body-bg:                  var(--yah-bg-body);
  --bs-body-color:               var(--yah-body-color);
  --bs-border-color:             var(--yah-border);
  --bs-border-color-translucent: rgba(13, 18, 28, 0.16);
  --bs-secondary-bg:             var(--yah-bg-surface-1);
  --bs-tertiary-bg:              var(--yah-bg-surface-2);
  --bs-secondary-color:          var(--yah-muted);
  --bs-tertiary-color:           rgba(13, 18, 28, 0.55);
  --bs-link-color:               var(--yah-body-color);
  --bs-link-hover-color:         var(--yah-primary-light);
  --bs-emphasis-color:           var(--yah-body-color);
  --bs-heading-color:            var(--yah-body-color);
}

/* --- Theme transition (respects motion prefs) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    transition: background-color var(--yah-theme-transition), color var(--yah-theme-transition);
  }
  body, .card, .btn, .navbar, .dropdown-menu,
  .app-sidebar, .app-sidebar .nav-link, .theme-toggle, .theme-toggle__btn {
    transition:
      background-color var(--yah-theme-transition),
      color            var(--yah-theme-transition),
      border-color     var(--yah-theme-transition),
      box-shadow       var(--yah-theme-transition);
  }
}

/* --- Base ---------------------------------------------------- */
body {
  font-size: var(--bs-body-font-size);
  background-color: var(--yah-bg-body);
  color: var(--yah-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--bs-link-color);
  text-decoration: none;
  transition: color var(--yah-transition-fast);
}
a:hover { color: var(--yah-primary-light); }

.text-muted, .text-secondary { color: var(--yah-muted) !important; }

/* --- Typography ---------------------------------------------- */
@media (max-width: 991.98px) { :root { --type-ratio: 1.25; --bs-body-font-size: 1rem; } }
@media (max-width: 767.98px) {
  :root { --type-ratio: 1.2; --bs-body-font-size: 1rem; }
  h1, .h1, h2, .h2, h3, .h3 { line-height: 1.25; }
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
h6, .h6 { font-size: var(--fs-h6); }

h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
  font-weight: var(--bs-headings-font-weight); /* 700 */
  line-height: 1.2;
  color: var(--bs-heading-color);
}

/* --- Buttons ------------------------------------------------- */
.btn {
  font-weight: 700;
  border-radius: var(--yah-radius);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition:
    transform           var(--yah-transition-fast),
    box-shadow          var(--yah-transition-fast),
    background-color    var(--yah-transition-fast),
    border-color        var(--yah-transition-fast);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Bootstrap .btn-primary → brand red (via BS5 CSS custom props) */
.btn-primary {
  --bs-btn-color:                 #fff;
  --bs-btn-bg:                    var(--yah-primary-light);
  --bs-btn-border-color:          var(--yah-primary);
  --bs-btn-hover-color:           #fff;
  --bs-btn-hover-bg:              var(--yah-primary-dark);
  --bs-btn-hover-border-color:    var(--yah-primary-dark);
  --bs-btn-focus-shadow-rgb:      var(--yah-primary-rgb);
  --bs-btn-active-color:          #fff;
  --bs-btn-active-bg:             var(--yah-primary-dark);
  --bs-btn-active-border-color:   var(--yah-primary-dark);
  --bs-btn-disabled-color:        #fff;
  --bs-btn-disabled-bg:           var(--yah-primary);
  --bs-btn-disabled-border-color: var(--yah-primary);
  padding: 0.625rem 1.25rem;
}
.btn-primary:hover, .btn-primary:focus { box-shadow: var(--yah-shadow); }

/* Red alias */
.btn-red {
  color: #fff;
  background: var(--yah-primary-light);
  border: 1px solid var(--yah-primary);
  padding: 0.625rem 1.25rem;
}
.btn-red:hover, .btn-red:focus {
  color: #fff;
  background: var(--yah-primary-dark);
  border-color: var(--yah-primary-dark);
  box-shadow: var(--yah-shadow);
}
.btn-red:disabled { opacity: 0.6; }

/* Dark surface */
.btn-dark, .btn-navy, .btn-dark-blue {
  color: #fff;
  background: var(--yah-bg-surface-2);
  border: 1px solid var(--yah-border-strong);
  padding: 0.625rem 1.25rem;
}
.btn-dark:hover,     .btn-dark:focus,
.btn-navy:hover,     .btn-navy:focus,
.btn-dark-blue:hover,.btn-dark-blue:focus {
  color: #fff;
  background: var(--yah-bg-surface-1);
  border-color: var(--yah-border-strong);
  box-shadow: var(--yah-shadow);
}

/* Light surface */
.btn-white, .btn-off-white, .btn-pale {
  color: #0D121C;
  background: var(--yah-light-3);
  border: 1px solid var(--yah-light-1);
  padding: 0.625rem 1.25rem;
}
.btn-white:hover,     .btn-white:focus,
.btn-off-white:hover, .btn-off-white:focus,
.btn-pale:hover,      .btn-pale:focus {
  color: #0D121C;
  background: var(--yah-light-2);
  border-color: var(--yah-light-1);
  box-shadow: var(--yah-shadow);
}

/* White outline / ghost */
.btn-white-outline {
  color: #fff !important;
  background: transparent;
  border: 1px solid #fff;
  padding: 0.625rem 1.25rem;
}
.btn-white-outline:hover, .btn-white-outline:focus {
  color: #0D121C !important;
  background: #fff;
  border-color: #fff;
  box-shadow: var(--yah-shadow);
}

/* Icon sizing inside buttons */
.btn svg, .btn img { width: 1em; height: 1em; flex-shrink: 0; }