/* ============================================================================
   cgi-tokens.css — single source of truth for SMU CGI design tokens
   Property: smucgi.org/assets/cgi-tokens.css
   Origin: extracted 2026-05-23 from smucgi.org/_drafts/index.html :root block
   Standing rule: any new color / scale / radius value gets added here first,
   then referenced via var(--cgi-*). No literal hex values in any property's
   inline <style> blocks. See BUILD_MANUAL §53 (R-1).
   ============================================================================ */

:root {
  /* ---------- COLOR (cgi-* namespace) ---------- */
  --cgi-navy:            #0a1e3a;
  --cgi-navy-deep:       #061226;
  --cgi-navy-soft:       #16315a;
  --cgi-cream:           #fdfaf3;
  --cgi-cream-tint:      #fefcf6;
  --cgi-surface:         #f5f0e8;
  --cgi-red:             #CC0000;
  --cgi-red-deep:        #7a0a1d;
  --cgi-warm:            #d96544;
  --cgi-warm-soft:       #e57047;
  --cgi-green:           #0e7a64;
  --cgi-green-soft:      #16a085;
  --cgi-ink:             #1a1a1a;
  --cgi-ink-muted:       #4a4a4a;
  --cgi-ink-subtle:      #6b6760;
  --cgi-cream-on-navy:   #e8dfd0;
  --cgi-subtle-on-navy:  #b9b3a3;
  --cgi-hairline:           rgba(232, 223, 208, 0.15);
  --cgi-hairline-on-cream:  rgba(10, 30, 58, 0.08);

  /* ---------- TYPOGRAPHY ---------- */
  --cgi-font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Iowan Old Style", serif;
  --cgi-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cgi-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Roboto Mono", monospace;

  /* ---------- TYPE SCALE (1.25 ratio) ---------- */
  --cgi-text-xs:    0.75rem;
  --cgi-text-sm:    0.875rem;
  --cgi-text-base:  1rem;
  --cgi-text-lg:    1.125rem;
  --cgi-text-xl:    1.25rem;
  --cgi-text-2xl:   1.5rem;
  --cgi-text-3xl:   1.875rem;
  --cgi-text-4xl:   2.25rem;
  --cgi-text-5xl:   3rem;
  --cgi-text-display-lg: clamp(3rem, 3.5vw + 1.5rem, 5.25rem);

  /* ---------- SPACING SCALE ---------- */
  --cgi-space-1:  0.25rem;
  --cgi-space-2:  0.5rem;
  --cgi-space-3:  0.75rem;
  --cgi-space-4:  1rem;
  --cgi-space-5:  1.5rem;
  --cgi-space-6:  2rem;
  --cgi-space-7:  2.5rem;
  --cgi-space-8:  3rem;
  --cgi-space-9:  4rem;
  --cgi-space-10: 5rem;
  --cgi-space-12: 7rem;
  --cgi-space-14: 9rem;

  /* ---------- LAYOUT ---------- */
  --cgi-container:        1180px;
  --cgi-container-narrow: 760px;
  --cgi-radius:           12px;
  --cgi-radius-sm:        6px;
  --cgi-radius-lg:        16px;

  /* ---------- TOP-NAV (cgi-topnav) ---------- */
  --cgi-topnav-height:    36px;
  --cgi-topnav-bg:        var(--cgi-navy);
  --cgi-topnav-fg:        var(--cgi-cream-on-navy);
  --cgi-topnav-active:    var(--cgi-red);
  --cgi-topnav-zindex:    1100;

  /* ---------- BREADCRUMBS ---------- */
  --cgi-crumb-height:     28px;
  --cgi-crumb-bg:         var(--cgi-cream-tint);
  --cgi-crumb-fg:         var(--cgi-ink-muted);
  --cgi-crumb-sep:        var(--cgi-ink-subtle);
}

/* ============================================================================
   SKELETON BARS — Intervention #10
   Replaces "…" flash in [data-counter] spans. Pure CSS animation.
   Apply via <span class="cgi-skeleton" style="width:48px"></span>
   or implicitly via [data-counter]:empty::before in tracker pages.
   ============================================================================ */
.cgi-skeleton {
  display: inline-block;
  height: 3px;
  width: 40px;
  vertical-align: middle;
  border-radius: 1.5px;
  background: linear-gradient(
    90deg,
    rgba(10,30,58,0.08) 0%,
    rgba(10,30,58,0.18) 50%,
    rgba(10,30,58,0.08) 100%
  );
  background-size: 200% 100%;
  animation: cgi-skeleton-shimmer 1.2s ease-in-out infinite;
}
.cgi-skeleton--on-navy {
  background: linear-gradient(
    90deg,
    rgba(232,223,208,0.10) 0%,
    rgba(232,223,208,0.30) 50%,
    rgba(232,223,208,0.10) 100%
  );
  background-size: 200% 100%;
}
@keyframes cgi-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cgi-skeleton { animation: none; }
}

/* ============================================================================
   CGI TOP-NAV STRIP — Intervention #1
   ============================================================================ */
.cgi-topnav {
  position: sticky;
  top: 0;
  z-index: var(--cgi-topnav-zindex);
  height: var(--cgi-topnav-height);
  background: var(--cgi-topnav-bg);
  color: var(--cgi-topnav-fg);
  font-family: var(--cgi-font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(232,223,208,0.10);
  display: flex;
  align-items: center;
  width: 100%;
}
.cgi-topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: var(--cgi-container);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}
.cgi-topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-family: var(--cgi-font-body);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0.95;
}
.cgi-topnav__brand:hover { opacity: 1; color: #fff; }
.cgi-topnav__brand img { width: 18px; height: 18px; display: block; }
.cgi-topnav__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cgi-topnav__nav a {
  color: var(--cgi-topnav-fg);
  opacity: 0.80;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: opacity .12s, border-color .12s, color .12s;
  white-space: nowrap;
  font-weight: 500;
}
.cgi-topnav__nav a:hover { opacity: 1; color: #fff; }
body[data-page="research"]     .cgi-topnav__nav a[data-target="research"],
body[data-page="tbc-monitor"]  .cgi-topnav__nav a[data-target="tbc-monitor"],
body[data-page="hilltop-docket"] .cgi-topnav__nav a[data-target="hilltop-docket"],
body[data-page="reincorporation-index"] .cgi-topnav__nav a[data-target="reincorporation-index"],
body[data-page="hilltop-forum"] .cgi-topnav__nav a[data-target="hilltop-forum"],
body[data-page="scholars"]     .cgi-topnav__nav a[data-target="scholars"],
body[data-page="publications"] .cgi-topnav__nav a[data-target="publications"],
body[data-page="events"]       .cgi-topnav__nav a[data-target="events"],
body[data-page="about"]        .cgi-topnav__nav a[data-target="about"],
body[data-page="xom-publication"] .cgi-topnav__nav a[data-target="research"] {
  opacity: 1;
  color: #fff;
  border-bottom-color: var(--cgi-topnav-active);
}

/* product picker chip (Intervention #8) */
.cgi-topnav__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232,223,208,0.10);
  border: 1px solid rgba(232,223,208,0.20);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.cgi-topnav__chip:hover { background: rgba(232,223,208,0.18); }
.cgi-topnav__chip::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255,255,255,0.85);
  margin-left: 2px;
}
.cgi-topnav__picker {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: #fff;
  color: var(--cgi-ink);
  border: 1px solid var(--cgi-hairline-on-cream);
  border-radius: var(--cgi-radius-sm);
  box-shadow: 0 12px 32px rgba(10,30,58,0.18);
  padding: 6px 0;
  display: none;
  list-style: none;
  margin: 0;
  z-index: calc(var(--cgi-topnav-zindex) + 5);
}
.cgi-topnav__picker.is-open { display: block; }
.cgi-topnav__picker li { margin: 0; }
.cgi-topnav__picker a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--cgi-ink);
  text-decoration: none;
  font-family: var(--cgi-font-body);
  text-transform: none;
  letter-spacing: 0;
  opacity: 1;
  border: none;
}
.cgi-topnav__picker a:hover { background: var(--cgi-surface); color: var(--cgi-navy); }
.cgi-topnav__picker a .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cgi-hairline-on-cream); }
.cgi-topnav__picker a.is-active .dot { background: var(--cgi-red); }
.cgi-topnav__picker a.is-active { color: var(--cgi-navy); font-weight: 700; }
.cgi-topnav__picker a small { color: var(--cgi-ink-subtle); margin-left: auto; font-size: 11px; }

/* hamburger button */
.cgi-topnav__menu-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(232,223,208,0.25);
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  width: 32px;
  height: 28px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* mobile (Intervention #1 + #9) */
@media (max-width: 720px) {
  .cgi-topnav__nav {
    position: absolute;
    top: var(--cgi-topnav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--cgi-navy);
    padding: 12px 24px;
    gap: 10px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(232,223,208,0.10);
    display: none;
  }
  .cgi-topnav__nav.is-open { display: flex; }
  .cgi-topnav__menu-btn { display: inline-flex; }
  .cgi-topnav__chip { font-size: 10px; padding: 3px 8px; }
}

/* ============================================================================
   CGI BRAND CHIP — Intervention #3
   Standard hero lockup: Dallas Hall red SVG + micro-caps wordmark.
   ============================================================================ */
.cgi-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  font-family: var(--cgi-font-body);
}
.cgi-brand-chip__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
}
.cgi-brand-chip__mark img { width: 24px; height: 24px; object-fit: contain; display: block; }
.cgi-brand-chip__words { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.cgi-brand-chip__primary {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: inherit;
  line-height: 1.2;
}
.cgi-brand-chip__sub {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  color: inherit;
  opacity: 0.7;
  line-height: 1.2;
}

/* ============================================================================
   CGI BREADCRUMBS — Intervention #2
   ============================================================================ */
.cgi-breadcrumbs {
  background: var(--cgi-crumb-bg);
  border-bottom: 1px solid var(--cgi-hairline-on-cream);
  font-family: var(--cgi-font-body);
  font-size: 13px;
  color: var(--cgi-crumb-fg);
  padding: 8px 0;
}
.cgi-breadcrumbs__inner {
  max-width: var(--cgi-container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: var(--cgi-crumb-height);
}
.cgi-breadcrumbs a {
  color: var(--cgi-navy-soft);
  text-decoration: none;
  border-bottom: 1px dotted rgba(10,30,58,0.30);
}
.cgi-breadcrumbs a:hover { color: var(--cgi-red); border-bottom-color: var(--cgi-red); }
.cgi-breadcrumbs__sep {
  color: var(--cgi-crumb-sep);
  margin: 0 2px;
  font-weight: 400;
}
.cgi-breadcrumbs__current {
  color: var(--cgi-ink);
  font-weight: 600;
}

/* ============================================================================
   CGI FOOTER — Intervention #4
   ============================================================================ */
.cgi-footer {
  background: var(--cgi-navy);
  color: var(--cgi-cream-on-navy);
  font-family: var(--cgi-font-body);
  font-size: 13px;
  line-height: 1.65;
  padding: 36px 0 28px;
  margin-top: 48px;
}
.cgi-footer a { color: var(--cgi-warm); text-decoration: none; border-bottom: 1px dotted rgba(217,101,68,0.45); }
.cgi-footer a:hover { color: var(--cgi-warm-soft); border-bottom-color: currentColor; }
.cgi-footer__inner {
  max-width: var(--cgi-container);
  margin: 0 auto;
  padding: 0 24px;
}
.cgi-footer__lock {
  font-family: var(--cgi-font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.cgi-footer__lock small { color: var(--cgi-subtle-on-navy); font-weight: 500; letter-spacing: 1px; }
.cgi-footer__director { margin: 0 0 14px; color: var(--cgi-cream-on-navy); }
.cgi-footer__cite {
  background: rgba(232,223,208,0.06);
  border-left: 3px solid var(--cgi-warm);
  padding: 10px 14px;
  margin: 14px 0;
  font-size: 12.5px;
  color: var(--cgi-cream-on-navy);
  border-radius: 3px;
}
.cgi-footer__cite b { color: #fff; }
.cgi-footer__legal { font-size: 11.5px; color: var(--cgi-subtle-on-navy); margin: 12px 0 0; }
.cgi-footer__rule {
  border: 0;
  border-top: 1px solid rgba(232,223,208,0.12);
  margin: 18px 0 12px;
}

@media (max-width: 540px) {
  .cgi-footer { padding: 28px 0 22px; font-size: 12.5px; }
  .cgi-brand-chip__primary { font-size: 10px; letter-spacing: 1.4px; }
  .cgi-brand-chip__sub { font-size: 9.5px; letter-spacing: 0.8px; }
}

/* When the brand chip sits on a dark background (e.g. .masthead, .hero, navy
   surfaces), force white text so the micro-caps lockup remains legible. */
.masthead .cgi-brand-chip,
.hero .cgi-brand-chip,
.site-header .cgi-brand-chip,
.page-hero--navy .cgi-brand-chip {
  color: #fff;
}
.masthead .cgi-brand-chip__sub,
.hero .cgi-brand-chip__sub,
.site-header .cgi-brand-chip__sub,
.page-hero--navy .cgi-brand-chip__sub {
  color: var(--cgi-subtle-on-navy, #b9b3a3);
}

/* ============================================================================
   Skeleton bar auto-apply for data-counter spans (Intervention #10)
   Targets the legacy "…" placeholder used by tracker hydration. The skeleton
   bar replaces the ellipsis until JS resolves the counter. The hydration
   script clears the textContent which removes the ::before pseudo.

   How it works: any [data-counter] that still contains exactly "…" gets a
   ::before bar overlaid. JS hydration sets textContent to the resolved value,
   which removes the "…" character and thus the bar.
   ============================================================================ */
[data-counter]:empty::before,
[data-counter] {
  /* base: behave normally; bar is in :empty / has-only-… variants below */
}
/* JS-injected resolved values overwrite this */