/**
 * Public-surface design tokens.
 * Defaults live on :root only so CompanyBranding :root overrides cascade.
 * Layout classes (.undp-public) must NOT redefine palette tokens.
 */
:root {
  --undp-blue-logo: #0F1F23;
  --undp-blue-102: #0F1F23;
  --undp-blue-170: #2F7C7B;
  --undp-blue-011: #1A4544;
  --undp-blue-038: #256665;
  --undp-blue-085: #64748b;
  --undp-blue-090: #5FBFB9;
  --undp-bright-085: #5FBFB9;
  --undp-bright-102: #7DD3CE;
  --undp-bright-255: #2FA7A1;
  --undp-blue-237: #E8F4F3;
  --undp-blue-grey: #94A3A8;
  --undp-map-dark: #0F1F23;
  --undp-map-light: #E8F4F3;

  --undp-white: #ffffff;
  --undp-page-bg: #ffffff;
  --undp-surface: #ffffff;
  --undp-surface-muted: #E8F4F3;
  --undp-ink: #0F1F23;
  --undp-ink-soft: #1A4544;
  --undp-muted: #64748b;
  --undp-border: #d5dce4;
  --undp-border-soft: #E8F4F3;
  --undp-border-strong: #94A3A8;

  --undp-navy: #0F1F23;
  --undp-navy-deep: #0A1417;
  --undp-accent: #2F7C7B;
  --undp-accent-hover: #256665;
  --undp-interactive: #256665;

  --undp-font-sans: Arial, Helvetica, "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --undp-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --undp-radius: 10px;
  --undp-radius-sm: 8px;
  --undp-radius-lg: 14px;
  --undp-radius-square: 0;

  --undp-elev-0: none;
  --undp-elev-1: 0 4px 16px -6px color-mix(in srgb, var(--undp-navy) 6%, transparent);
  --undp-elev-2: 0 12px 40px -12px color-mix(in srgb, var(--undp-navy) 16%, transparent);
  --undp-shadow: var(--undp-elev-1);
  --undp-shadow-lift: 0 8px 24px -8px color-mix(in srgb, var(--undp-navy) 12%, transparent);
  --undp-shadow-card: var(--undp-elev-1);
  --undp-shadow-card-hover: var(--undp-elev-2);
  --undp-focus: 0 0 0 2px var(--undp-surface), 0 0 0 4px var(--undp-accent);

  --undp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --undp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --undp-duration: 200ms;

  /* Semantic bridges — branding_css_block overrides these on :root */
  --primary-dark: var(--undp-navy);
  --primary-brand: var(--undp-accent);
  --primary-accent: var(--undp-accent);
  --navy: var(--undp-navy);
  --navy-deep: var(--undp-navy-deep);
  --accent: var(--undp-accent);
  --accent-bright: var(--undp-bright-085);
  --interactive: var(--undp-interactive);
  --background: var(--undp-page-bg);
  --surface: var(--undp-surface);
  --ink: var(--undp-ink);
  --ink-soft: var(--undp-ink-soft);
  --muted: var(--undp-muted);
  --border: var(--undp-border);
  --error: var(--undp-ink);
  --success: var(--undp-accent);
  --warning: var(--undp-interactive);
  --info: var(--undp-accent);
  --radius-sm: var(--undp-radius-sm);
  --radius-md: var(--undp-radius);
  --radius-lg: var(--undp-radius-lg);
}

.undp-public {
  font-family: var(--undp-font-sans);
  color: var(--undp-ink, var(--primary-dark));
  background: var(--undp-page-bg, var(--background));
  -webkit-font-smoothing: antialiased;
}

.undp-public h1,
.undp-public h2,
.undp-public h3,
.undp-public h4 {
  color: var(--primary-dark, var(--undp-ink, var(--undp-blue-102)));
  font-family: var(--undp-font-sans);
  font-weight: 700;
  line-height: 1.2;
}

.undp-public a {
  color: var(--primary-brand, var(--undp-blue-170));
}

.undp-public a:hover {
  color: var(--primary-dark, var(--undp-blue-102));
}

.undp-kicker {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, var(--undp-muted, var(--undp-blue-085)));
}

.undp-tagline {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted, var(--undp-muted, var(--undp-blue-085)));
}

.undp-signal-rail {
  width: 2.5rem;
  height: 3px;
  border-radius: 0;
  background: var(--primary-brand, var(--undp-accent));
}

.undp-brand-bar {
  height: 4px;
  border-radius: 0;
  background: var(--primary-brand, var(--undp-accent));
}

/* Shared public brand mark */
.brand-mark {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.brand-mark__plate,
.brand-mark-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.5rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  line-height: 0;
}

.brand-mark__logo,
.brand-mark-img {
  display: block;
  object-fit: contain;
}

.brand-mark--auth .brand-mark__plate,
.brand-mark--auth .brand-mark-plate {
  margin-bottom: 0.35rem;
}

.brand-mark--hero .brand-mark__title {
  color: #fff !important;
}

.brand-mark--hero .brand-mark__accent {
  color: var(--accent-bright, var(--primary-accent)) !important;
}

.brand-mark--hero .brand-mark__sub {
  color: rgba(231, 239, 246, 0.72) !important;
}

.brand-mark--footer .brand-mark__title {
  color: #fff !important;
}

.brand-mark--footer .brand-mark__accent {
  color: var(--accent-bright, var(--primary-accent)) !important;
}

.brand-mark--footer .brand-mark__sub {
  color: rgba(198, 211, 223, 0.7) !important;
}