/* ============================================================
   EUPDB theme. Loaded LAST on every page. Ink and brass palette,
   IBM Plex Sans everywhere, hierarchy by weight and size.
   Overrides the tokens of style.css, glass.css, brand-2026.css
   and md3.css so the site reads darker and more formal.
   ============================================================ */
:root {
  --ink:        #0B1622;   /* primary surface for nav, footer, hero, bands */
  --ink-2:      #13212F;
  --ink-3:      #1C2D3E;
  --brass:      #B8924A;   /* accent */
  --brass-2:    #D2B06A;
  --brass-3:    #8F6E33;
  --brass-soft: #E8DBB8;
  --paper:      #EEF0F2;   /* page ground */
  --paper-2:    #E4E7EB;

  --bg:            var(--paper);
  --bg-2:          #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     var(--paper);
  --surface-3:     var(--paper-2);
  --primary:       var(--ink);
  --primary-light: #1F3A57;
  --primary-glow:  rgba(11,22,34,.14);
  --gold:          var(--brass);
  --gold-light:    var(--brass-2);
  --gold-glow:     rgba(184,146,74,.22);
  --sky:           var(--ink);
  --sky-dim:       #060D15;
  --text:          #101820;
  --text-muted:    #4C5865;
  --text-faint:    #8C97A3;
  --border:        rgba(16,24,32,.10);
  --border-light:  rgba(16,24,32,.16);
  --border-gold:   rgba(184,146,74,.45);
  --shadow-blue:   0 4px 16px rgba(11,22,34,.18);
  --shadow-gold:   0 4px 16px rgba(184,146,74,.25);

  --brand-navy:     var(--ink);
  --brand-sky:      var(--brass);
  --brand-sky-soft: var(--brass-soft);
  --brand-tint:     var(--paper);

  --navy: var(--ink);
  --glass-bg:     rgba(255,255,255,.42);
  --glass-border: rgba(255,255,255,.7);
  --glass-shadow: 0 20px 50px -18px rgba(11,22,34,.38);

  --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body, button, input, select, textarea {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body { background: var(--paper); color: var(--text); }

h1, h2, h3,
.hero-h, .hero-right-headline, .page-header-h, .hiw-hero-h, .hiw-h,
.why-h, .news-h, .platform-h2, .eu-heading, .cta-h2,
.selector-h, .selector-title, .attest-h, .attest-why-h, .section-h,
.plan-modal-title, .plan-name, .plan-title,
.card-h, .reg-h, .reg-title, .success-h, .success-title,
.profile-hero-name, .um-name, .drawer-title,
.entry-title, .result-h,
.modal-title, .sim-title, .wl-title {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  letter-spacing: -0.021em;
}
h4, h5, h6 { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; }

/* Selection and focus in brass */
::selection { background: rgba(184,146,74,.30); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ------------------------------------------------------------
   Contrast. White controls sat on white glass over a pale ground
   and disappeared. The glass stays (translucent faces, blur behind
   them); what changes is a visible ink edge on every chip, choice
   and input, a soft ink edge on cards, and a darker faint text tone.
   ------------------------------------------------------------ */
:root {
  --text-faint: #5F6B78;
  --text-dim:   #2F4257;
  --glass-border: rgba(11,22,34,.12);
}
.check-chip, .cw-chip:not(.sel), .intro-chip, .cap-chip, .field-cell,
.hm-pill, .db-chip, .pc-badge, .pill-btn:not(.tinted):not(.primary),
.glass-input, .cw-field, .search-main-input, .filter-chip, .chip {
  border: 1px solid rgba(11,22,34,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px -2px rgba(11,22,34,.18);
}
.check-chip:hover, .cw-chip:not(.sel):hover, .intro-chip:hover, .cap-chip:hover, .field-cell:hover {
  border-color: rgba(11,22,34,.5);
}
.check-chip.sel, .cw-chip.sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.glass, .info-card, .q-item, .how-card, .faq-item, .talk-panel, .pcard, .db-panel, .how-stage, .gdpr-bar {
  border-color: rgba(11,22,34,.14);
}
.check-progress { background: rgba(11,22,34,.14); }
.page-band .pill-btn:not(.tinted) {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.55); color: #fff; box-shadow: none;
}
/* Secondary pill on the dark hero band: an outline on ink, not a white pill. */
.hero .hero-actions .pill-btn:not(.tinted) {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.55); color: #fff; box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero .hero-actions .pill-btn:not(.tinted):hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.8); }