/* NLCA brand theme — single source of truth for color tokens.
 *
 * The :root block below holds the *defaults*. At runtime, contact.js
 * fetches /api/v1/theme and overrides any of these via
 * `document.documentElement.style.setProperty('--<name>', '<value>')`.
 * That means a deployment can re-skin every page by setting
 * THEME_PRIMARY / THEME_ACCENT / THEME_INK / THEME_BG / THEME_LINK in
 * .env — no rebuild of the static assets required.
 *
 * If you're adding a new color, add it here so every page gets it.
 * Per-page styles (typography, layout, page-specific component skins)
 * stay inline in each HTML file for now.
 */

:root {
  /* ---- Brand primaries (override-able via /api/v1/theme) ---- */
  --navy:        #0F2A47;     /* THEME_PRIMARY  — headers, buttons, key text */
  --gold:        #E8B53C;     /* THEME_ACCENT   — accents, rule lines, badges */
  --royal:       #1E5BA8;     /* THEME_LINK     — links, eyebrows, focus rings */
  --ink:         #1A2332;     /* THEME_INK      — body text */
  --paper:       #F8FAFC;     /* THEME_BG       — page background */

  /* ---- Derived shades (rarely re-themed; kept here for cohesion) ---- */
  --navy-deep:   #081C33;
  --royal-soft:  #DDE9F7;
  --royal-tint:  #F0F6FE;
  --gold-deep:   #C99520;
  --gold-soft:   #FBE9B0;
  --gold-tint:   #FEF7E0;
  --crimson:     #B43E3E;
  --emerald:     #10A36B;
  --emerald-soft:#C8EBDC;
  --ink-soft:    #4A5568;
  --muted:       #94A3B8;
  --line:        #E2E8F0;
  --cream:       #FBF7EE;
  --card:        #FFFFFF;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px  rgba(15, 42, 71, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 42, 71, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 42, 71, 0.15);
  --shadow-xl: 0 40px 80px rgba(15, 42, 71, 0.18);

  /* ---- Radii ---- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
}

/* ---- Language picker (shared across all pages) ---- */
.lang-picker {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.lang-picker [data-lang] {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  transition: all 0.15s ease;
}
.lang-picker [data-lang]:hover { color: var(--navy); }
.lang-picker [data-lang].active {
  background: var(--navy);
  color: white;
}