/* ============================================================
   BIG HEART GROUP HOME — GLOBAL BRAND TOKENS
   Include this file in every page, theme, and template.
   
   WordPress:  @import in style.css or enqueue via functions.php
   Galleries:  <link rel="stylesheet" href="/bh-tokens.css">
   TinySlick:  <link rel="stylesheet" href="/bh-tokens.css">
   ============================================================ */

:root {

  /* ── Core Blues ── */
  --bh-b900: #0D2B6E;   /* topbar, footer, darkest */
  --bh-b700: #1B4DB8;   /* primary — nav, buttons, stats bar */
  --bh-b600: #2563EB;   /* accents, eyebrows, links */
  --bh-b100: #DBEAFE;   /* light tints, gallery cells */
  --bh-b50:  #EFF6FF;   /* very light bg, tag fills */

  /* ── Neutrals ── */
  --bh-white: #FFFFFF;
  --bh-g50:   #F8FAFC;  /* subtle section bg */
  --bh-g100:  #F1F5F9;  /* alternate section bg */
  --bh-g200:  #E2E8F0;  /* borders, dividers */
  --bh-g400:  #94A3B8;  /* muted text, captions */
  --bh-g700:  #334155;  /* body text */
  --bh-g900:  #0F172A;  /* headings, near-black */

  /* ── Accent ── */
  --bh-red:   #CC0000;  /* logo, vacancy dot only */

  /* ── Typography ── */
  --bh-font-display: 'Merriweather', Georgia, serif;
  --bh-font-body:    'Inter', system-ui, sans-serif;

  /* ── Spacing scale ── */
  --bh-space-xs:  8px;
  --bh-space-sm:  16px;
  --bh-space-md:  24px;
  --bh-space-lg:  48px;
  --bh-space-xl:  88px;

  /* ── Border radius ── */
  --bh-radius-sm: 4px;
  --bh-radius-md: 8px;
  --bh-radius-lg: 12px;

  /* ── Shadows ── */
  --bh-shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --bh-shadow-md: 0 4px 20px rgba(0,0,0,.08);
  --bh-shadow-lg: 0 8px 32px rgba(27,77,184,.12);
}

/* ── Reusable utility classes ── */

/* Buttons */
.bh-btn {
  font-family: var(--bh-font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--bh-radius-md);
  border: none;
  cursor: pointer;
  transition: background .15s, transform .15s;
  text-decoration: none;
  display: inline-block;
}
.bh-btn-primary  { background: var(--bh-b700); color: #fff; }
.bh-btn-primary:hover  { background: var(--bh-b900); }
.bh-btn-outline  { background: #fff; color: var(--bh-b700); border: 1.5px solid var(--bh-b700); }
.bh-btn-outline:hover  { background: var(--bh-b50); }
.bh-btn-ghost    { background: var(--bh-g100); color: var(--bh-g700); border: 1px solid var(--bh-g200); }
.bh-btn-ghost:hover    { background: var(--bh-g200); }

/* Typography */
.bh-h1 { font-family: var(--bh-font-display); font-weight: 900; color: var(--bh-g900); letter-spacing: -.5px; line-height: 1.08; }
.bh-h2 { font-family: var(--bh-font-display); font-weight: 700; color: var(--bh-g900); letter-spacing: -.3px; line-height: 1.1; }
.bh-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--bh-b700);
  display: flex; align-items: center; gap: 10px;
}
.bh-eyebrow::after { content: ''; width: 24px; height: 2px; background: var(--bh-b700); border-radius: 2px; }

/* Cards */
.bh-card {
  background: var(--bh-white);
  border: 1px solid var(--bh-g200);
  border-radius: var(--bh-radius-lg);
  padding: var(--bh-space-md);
  transition: box-shadow .18s, transform .18s;
}
.bh-card:hover { box-shadow: var(--bh-shadow-lg); transform: translateY(-2px); }
.bh-card-accent { border-top: 3px solid var(--bh-b700); }

/* Tags / badges */
.bh-tag {
  padding: 5px 14px; border-radius: var(--bh-radius-sm);
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--bh-g200);
  color: var(--bh-g700); background: var(--bh-white);
}
.bh-tag-primary { background: var(--bh-b700); color: #fff; border-color: var(--bh-b700); }
.bh-tag-blue    { background: var(--bh-b50);  color: var(--bh-b700); border-color: var(--bh-b100); }

/* Section containers */
.bh-section       { padding: var(--bh-space-xl) var(--bh-space-lg); }
.bh-section-inner { max-width: 1100px; margin: 0 auto; }
.bh-section-white { background: var(--bh-white); }
.bh-section-gray  { background: var(--bh-g50); }
.bh-section-blue  { background: var(--bh-b700); }
.bh-section-dark  { background: var(--bh-g900); }

/* Nav utility */
.bh-nav-link { font-size: 13px; font-weight: 500; color: var(--bh-g700); padding: 8px 16px; border-radius: var(--bh-radius-md); text-decoration: none; transition: color .14s, background .14s; }
.bh-nav-link:hover  { color: var(--bh-b700); background: var(--bh-b50); }
.bh-nav-link.active { color: var(--bh-b700); font-weight: 600; }