/* ============================================================
   Banyan Design System — tokens + typography for the Registry
   Source of truth: Banyan Institute design-system/tokens/tokens.css
   Linked by both index.html (Registry) and dashboard.html (Index).
   Legacy aliases (--green-deep, --amber, --cream, --radius, …) are
   preserved so the existing page CSS keeps working unchanged.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lato:wght@300;400&family=JetBrains+Mono:wght@400;500&display=swap');

/* Self-hosted Montserrat Bold — logo wordmark only */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('MontserratBold.ttf') format('truetype');
}

:root {
  /* ── Brand green scale ─────────────────────────────────── */
  --banyan-brand-50:  #edf7f2;
  --banyan-brand-100: #d1eee3;
  --banyan-brand-200: #a5d8c0;
  --banyan-brand-300: #74c9a3;
  --banyan-brand-400: #52b788;   /* logo canopy, map light */
  --banyan-brand-500: #3d8a6a;
  --banyan-brand-600: #2d6a4f;   /* secondary nav, map medium */
  --banyan-brand-700: #235638;
  --banyan-brand-800: #1a4731;   /* nav / header background */
  --banyan-brand-900: #0f2d1f;

  /* ── Amber scale (action / accent) ─────────────────────── */
  --banyan-amber-50:  #fdf3e7;
  --banyan-amber-100: #fae3c2;
  --banyan-amber-200: #f5c88a;
  --banyan-amber-400: #f0a854;   /* amber-light */
  --banyan-amber-600: #c97d2e;   /* primary CTA, logo trunk, map bubbles */
  --banyan-amber-700: #a36423;
  --banyan-amber-800: #7a4a19;

  /* ── Neutrals ───────────────────────────────────────────── */
  --banyan-paper:     #faf8f5;   /* page canvas */
  --banyan-surface:   #ffffff;   /* card backgrounds, inputs */
  --banyan-surface-2: #f0ece6;   /* secondary surface */
  --banyan-line:      #ddd8d0;   /* borders, dividers */
  --banyan-line-strong: #cdc7bd;

  /* ── Ink / text ─────────────────────────────────────────── */
  --banyan-ink-900: #1a2633;
  --banyan-ink-600: #4a5568;
  --banyan-ink-400: #718096;
  --banyan-ink-200: #a0aec0;
  --banyan-ink-100: #e2e8f0;

  /* ── Semantic colors ────────────────────────────────────── */
  --banyan-success-100: #d1fae5; --banyan-success-600: #065f46;
  --banyan-warn-100:    #fef3c7; --banyan-warn-600:    #d97706;
  --banyan-danger-100:  #fee2e2; --banyan-danger-600:  #dc2626;
  --banyan-info-100:    #dbeafe; --banyan-info-600:    #2563eb; --banyan-info-700: #1d4ed8;

  /* ── Registry scope badge colors ───────────────────────── */
  --banyan-scope-national-bg: var(--banyan-info-100);   --banyan-scope-national-fg: var(--banyan-info-700);
  --banyan-scope-regional-bg: var(--banyan-brand-100);  --banyan-scope-regional-fg: var(--banyan-brand-700);
  --banyan-scope-local-bg:    var(--banyan-amber-100);  --banyan-scope-local-fg:    var(--banyan-amber-700);

  /* ── Index health-score tiers (sequential, at-risk → healthy) ── */
  --banyan-score-healthy:  #2d6a4f;
  --banyan-score-stable:   #2563eb;
  --banyan-score-at-risk:  #d97706;
  --banyan-score-critical: #dc2626;

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Lato', 'Inter', sans-serif;        /* uppercase tracked subtitle only */
  --font-logo:    'Montserrat', 'Inter', sans-serif;  /* logo wordmark only */
  --font-mono:    'JetBrains Mono', ui-monospace, 'Fira Code', monospace;
  --tracking-subtitle: 0.12em;

  /* ── Radius ─────────────────────────────────────────────── */
  --banyan-radius-sm:  4px;
  --banyan-radius-md:  6px;
  --banyan-radius-lg:  10px;
  --banyan-radius-xl:  16px;
  --banyan-radius-full: 9999px;

  /* ── Shadows (cool slate) ───────────────────────────────── */
  --banyan-shadow-xs: 0 1px 3px rgba(26,38,51,0.08);
  --banyan-shadow-sm: 0 2px 6px rgba(26,38,51,0.08);
  --banyan-shadow-md: 0 4px 12px rgba(26,38,51,0.10);
  --banyan-shadow-lg: 0 8px 24px rgba(26,38,51,0.12);
  --banyan-shadow-xl: 0 16px 48px rgba(26,38,51,0.14);

  /* ── Motion ─────────────────────────────────────────────── */
  --banyan-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --banyan-dur-ui: 160ms;

  /* ── Legacy aliases — keep existing page CSS working ───── */
  --green-deep:  var(--banyan-brand-800);
  --green-mid:   var(--banyan-brand-600);
  --green-light: var(--banyan-brand-400);
  --amber:       var(--banyan-amber-600);
  --amber-light: var(--banyan-amber-400);
  --cream:       var(--banyan-paper);
  --cream-dark:  var(--banyan-surface-2);
  --border:      var(--banyan-line);
  --white:       var(--banyan-surface);
  --text-dark:   var(--banyan-ink-900);
  --text-mid:    var(--banyan-ink-600);
  --text-soft:   var(--banyan-ink-400);
  --shadow-sm:   var(--banyan-shadow-xs);
  --shadow-md:   var(--banyan-shadow-md);
  --radius:      var(--banyan-radius-lg);
}

/* Base typography — Inter everywhere by default */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Brand lockup used in both page headers */
.banyan-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.banyan-lockup .mark { height: 44px; width: auto; flex-shrink: 0; display: block; }
.banyan-lockup .wordmark {
  font-family: var(--font-logo); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; line-height: 1; font-size: 1.25rem; white-space: nowrap;
}
.banyan-lockup .subtitle {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: var(--tracking-subtitle); font-size: 0.6rem; opacity: 0.72; margin-top: 3px; white-space: nowrap;
}
@media (max-width: 480px) {
  .banyan-lockup .subtitle { white-space: normal; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}