/* ─────────────────────────────────────────────────────────────────
   Expand Education — Brand Tokens
   Source of truth for colors, typography, spacing across the LMS.
   Locked decisions (2026-06-01 call) — see docs/2026-06-01-branding-kit-refresh.md
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Brand identity */
  --brand-name: "Expand Education";

  /* Color — accent (working teal, pending Judith sign-off) */
  --accent:        #3d8b8b;
  --accent-dark:   #2a6b6b;
  --accent-light:  #5fa8a8;
  --accent-dim:    rgba(61, 139, 139, 0.08);
  --accent-tint:   rgba(61, 139, 139, 0.18);

  /* Color — surface / structural */
  --bg:        #f8f9fc;
  --surface:   #ffffff;
  --surface2:  #f1ece1;
  --surface3:  #e0ddd5;
  --border:    #d8d2c4;

  /* Color — text */
  --text:        #1a1a1a;
  --text-muted:  #6b6b6b;
  --text-faint:  #9a9a9a;
  --text-on-accent: #ffffff;

  /* Color — semantic */
  --green:  #16a34a;
  --red:    #dc2626;
  --amber:  #b45309;
  --info:   #2563eb;

  /* Backwards compatibility: existing pages use --gold for the accent.
     Map it onto --accent so the rebrand cascades without find/replace. */
  --gold:     var(--accent);
  --gold-dim: var(--accent-dim);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Inter", Arial, sans-serif;
  --font-body: var(--font);
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 28px;
  --fs-3xl: 38px;
  --fs-4xl: 52px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Geometry */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --max-w:     1140px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow:    0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
}

/* ─────────────────────────────────────────────────────────────────
   Sidebar + portal overrides
   The legacy expand-design.css (carried over from EHAI patient portal)
   defines a dark-green sidebar palette (--sidebar-bg #1B3A30, accent
   #4ADE80). Expand Education's locked accent is teal, so we re-map
   those tokens here to keep brand.css as the single source of truth
   without editing the legacy design file in place.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Sidebar — dark teal in place of EHAI dark green */
  --sidebar-bg:        #102525;
  --sidebar-hover:     #173838;
  --sidebar-active:    #2a6b6b;
  --sidebar-text:      #d6ebe9;
  --sidebar-text-dim:  rgba(214, 235, 233, 0.55);
  --sidebar-border:    rgba(255, 255, 255, 0.08);

  /* Accent / primary tokens consumed by the portal — point at the
     brand teal so logo marks, button fills, and active states render
     in Expand Education colors. */
  --accent-green:      var(--accent);
  --primary-light:     var(--accent);
  --primary-dark:      var(--accent-dark);
}

/* Dark / inverted variants used by the dashboard sidebar. Pages that use
   data-theme="dark" or .theme-dark on a wrapper get these overrides. */
[data-theme="dark"],
.theme-dark {
  --bg:        #0a0c10;
  --surface:   #11141a;
  --surface2:  #1a1f28;
  --surface3:  #232a35;
  --border:    #2a3340;
  --text:        #f1f2f4;
  --text-muted:  #a8b0bc;
  --text-faint:  #7a8294;
}

/* Utility: brand link */
.brand-link {
  color: var(--accent);
  text-decoration: none;
  transition: color 120ms ease;
}
.brand-link:hover { color: var(--accent-dark); }

/* Utility: brand button */
.btn-brand {
  display: inline-block;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
  text-decoration: none;
}
.btn-brand:hover { background: var(--accent-dark); }

/* Utility: brand divider (used in email-style signatures) */
.brand-divider {
  border: 0;
  border-top: 2px solid var(--accent);
  width: 48px;
  margin: var(--space-2) 0;
}