:root {
  /* Brand palette (from logo) */
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --color-primary: #4C74E6;          /* principal */
  --color-primary-rgb: 76, 116, 230;
  --color-primary-light: #86A2FA;    /* complementar */
  --color-primary-hover: #3f64cf;
  --color-primary-soft: #e8f0ff;
  --color-primary-soft-border: #cdddfd;
  --color-bg-soft: #F5F7FF;          /* fundo/realce */
  --color-bg: #ffffff;
  --bg-element: #ffffff;
  --bg-element-soft: #f8f9fa;
  --bg-element-muted: #f1f3f5;
  --bg-element-strong: #343a40;
  --color-text-secondary: #475569;   /* grafite para texto secundário */
  --color-text-muted: #596170;       /* darkened from #6c757d for WCAG AA compliance (≥4.5:1) */
  --color-text-muted-rgb: 89, 97, 112;
  --color-text-subtle: #495057;
  --color-text-subtle-rgb: 73, 80, 87;
  --color-text-strong: #212529;
  --color-text-strong-rgb: 33, 37, 41;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #f1f3f5;
  --color-neutral-300: #d9d9d9;
  --color-neutral-400: #adb5bd;

  /* System colors */
  --color-success: #2e7d32;
  --color-success-rgb: 46, 125, 50;
  --color-success-hover: #255d29;
  --color-success-strong: #157347;
  --color-success-strong-rgb: 21, 115, 71;
  --color-success-soft: #e7f3ea;
  --color-success-soft-border: #c9e8d0;
  --color-danger: #c62828;
  --color-danger-rgb: 198, 40, 40;
  --color-danger-hover: #a31f1f;
  --color-danger-strong: #b02a37;
  --color-danger-strong-rgb: 176, 42, 55;
  --color-danger-soft: #fdecea;
  --color-danger-soft-border: #f5c2c0;
  --color-warning: #ffc107;
  --color-warning-rgb: 255, 193, 7;
  --color-warning-soft: #fff3cd;
  --color-warning-soft-border: #faebcc;
  --color-warning-strong: #8a6d3b;
  --color-warning-text: #212529;
  --color-info: #0d6efd;
  --color-info-rgb: 13, 110, 253;
  --color-info-accent: #17a2b8;
  --color-info-accent-rgb: 23, 162, 184;
  --color-info-soft: #e3f2fd;
  --color-info-soft-border: #2196f3;
  --color-info-strong: #1976d2;
  --color-primary-legacy: #007bff;
  --color-success-legacy: #28a745;
  --color-neutral-strong: #495057;
  --color-text: #222222;

  /* Derived */
  --link-color: var(--color-primary);
  --link-hover-color: var(--color-primary-hover);
  --border-subdued: #e9ecef;
  --border-strong: #dee2e6;
  --border-muted: #adb5bd;
  --border-contrast: #c2c2c2;
  --border-soft: rgba(var(--color-black-rgb), 0.1);
  --border-softer: rgba(var(--color-black-rgb), 0.08);
  --border-overlay: rgba(var(--color-black-rgb), 0.12);
  --border-overlay-strong: rgba(var(--color-black-rgb), 0.125);
  --border-subtle: rgba(var(--color-text-muted-rgb), 0.2);
  --border-subtle-strong: rgba(var(--color-text-muted-rgb), 0.35);
  --border-muted-alpha: rgba(var(--color-text-muted-rgb), 0.14);
  --border-muted-alpha-strong: rgba(var(--color-text-muted-rgb), 0.16);
  --border-muted-alpha-heavy: rgba(var(--color-text-muted-rgb), 0.5);
  --border-primary-alpha: rgba(var(--color-primary-rgb), 0.12);
  --border-primary-alpha-soft: rgba(var(--color-primary-rgb), 0.18);
  --border-primary-alpha-strong: rgba(var(--color-primary-rgb), 0.28);
  --shadow-sm: 0 0.125rem 0.5rem rgba(var(--color-black-rgb), 0.1);
  --shadow-md: 0 0.5rem 1.5rem rgba(var(--color-black-rgb), 0.15);
  --shadow-lg: 0 0.5rem 2rem rgba(var(--color-black-rgb), 0.12);
  --shadow-xl: 0 0.75rem 2rem rgba(var(--color-black-rgb), 0.2);
  --shadow-hover: 0 0.25rem 0.75rem rgba(var(--color-black-rgb), 0.1);
  --shadow-hover-strong: 0 0.25rem 0.75rem rgba(var(--color-black-rgb), 0.25);
  --shadow-raised: 0 0.125rem 0.5rem rgba(var(--color-black-rgb), 0.15);
  --shadow: var(--shadow-md);
  --shadow-focus: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
  --shadow-focus-strong: 0 0 0 2px rgba(var(--color-primary-rgb), 0.35);
  --shadow-selection: 0 0 0 3px rgba(var(--color-text-strong-rgb), 0.2);
  --shadow-focus-info: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
  --shadow-focus-info-soft: 0 0 0 0.2rem rgba(var(--color-info-rgb), 0.25);
  --shadow-focus-success: 0 0 0 0.2rem rgba(var(--color-success-strong-rgb), 0.2), 0 0.375rem 0.875rem rgba(var(--color-success-strong-rgb), 0.18);
  --shadow-focus-danger: 0 0 0 0.2rem rgba(var(--color-danger-strong-rgb), 0.2), 0 0.375rem 0.875rem rgba(var(--color-danger-strong-rgb), 0.18);
  --shadow-focus-neutral: 0 0 0 0.2rem rgba(var(--color-text-subtle-rgb), 0.2), 0 0.375rem 0.875rem rgba(var(--color-text-subtle-rgb), 0.18);
  --shadow-card-float: 0 0.25rem 0.75rem rgba(var(--color-text-strong-rgb), 0.12);
  --shadow-primary-soft: 0 0 0 0.18rem rgba(var(--color-primary-rgb), 0.08);
  --shadow-primary-lg: 0 1rem 2rem rgba(var(--color-primary-rgb), 0.12);
  --shadow-inset-highlight: inset 0 1px 0 rgba(var(--color-white-rgb), 0.45);

  --overlay-backdrop: rgba(var(--color-black-rgb), 0.4);
  --overlay-surface-strong: rgba(var(--color-white-rgb), 0.98);
  --overlay-surface-subtle: rgba(var(--color-white-rgb), 0.6);
  --overlay-surface-soft: rgba(var(--color-white-rgb), 0.35);
  --overlay-backdrop-strong: rgba(var(--color-black-rgb), 0.45);
  --overlay-backdrop-soft: rgba(var(--color-black-rgb), 0.25);
  --focus-outline-soft: rgba(var(--color-primary-rgb), 0.5);
  --surface-elevated-muted: rgba(var(--color-white-rgb), 0.78);
  --surface-elevated-soft: rgba(var(--color-white-rgb), 0.72);
  --surface-elevated-strong: rgba(var(--color-white-rgb), 0.8);
  --surface-elevated-topbar: rgba(var(--color-white-rgb), 0.96);
  --surface-glass: rgba(var(--color-white-rgb), 0.62);
  --surface-glass-strong: rgba(var(--color-white-rgb), 0.74);
  --surface-glass-stronger: rgba(var(--color-white-rgb), 0.82);
  --surface-glass-prominent: rgba(var(--color-white-rgb), 0.95);
  --surface-glass-opaque: rgba(var(--color-white-rgb), 0.98);
  --surface-glass-inverse-soft: rgba(var(--color-white-rgb), 0.18);
  --surface-selected-primary: rgba(var(--color-primary-rgb), 0.08);
  --surface-selected-primary-strong: rgba(var(--color-primary-rgb), 0.18);
  --surface-reading: var(--surface-elevated-strong);
  --surface-reading-strong: var(--surface-glass-opaque);
  --surface-interactive: var(--surface-glass-prominent);
  --surface-interactive-muted: var(--color-bg);
  --border-reading: var(--border-muted-alpha);
  --border-interactive: var(--border-primary-alpha);
  --divider-subtle: var(--border-muted-alpha);
  --shadow-card-subtle: var(--shadow-card-float);

  --feedback-danger-soft: #fff5f5;
  --feedback-danger-soft-hover: #ffeaea;
  --feedback-warning-soft: #fcf8e3;
  --gradient-neutral-soft: linear-gradient(180deg, var(--bg-element-soft) 0%, var(--color-neutral-300) 100%);

  /* Focus */
  --focus-outline-color: var(--color-primary);
  --focus-outline: 2px solid var(--focus-outline-color);
  --size-focus-outline: 3px;
  --size-focus-outline-forced: 2px;

  /* Spacing & radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 0.9rem;
  --radius-pill: 999px;
  --space-3xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-2xs: 0.375rem;
  --space-sm: 0.5rem;
  --space-sm-plus: 0.625rem;
  --space-md: 0.75rem;
  --space-md-plus: 0.875rem;
  --space-lg: 1rem;
  --space-lg-plus: 1.25rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-2xl-plus: 2.5rem;
  --space-3xl: 2.5rem;
  --space-4xl: 3rem;
  --space-5xl: 4rem;
  --space-2: 1rem;
  --space-fluid-sm: clamp(0.75rem, 2vw, 1rem);
  --space-fluid-md: clamp(1rem, 3vw, 1.5rem);
  --space-fluid-lg: clamp(1.5rem, 4vw, 2.5rem);
  --layout-navbar-height: 64px;
  --layout-navbar-height-mobile: 56px;
  --layout-footer-height: 50px;
  --layout-footer-margin-top: 64px;
  --layout-footer-margin-top-mobile: 44px;
  --layout-sticky-offset: 80px;
  --layout-scroll-offset: 96px;
  --layout-review-nav-offset: calc(var(--layout-navbar-height) - var(--space-xs));
  --layout-review-nav-offset-mobile: calc(var(--layout-navbar-height-mobile) - var(--space-xs));
  --size-border-hairline: 1px;
  --size-border-emphasis: 2px;
  --size-border-strong: 3px;
  --size-navbar-line: 1.25rem;
  --size-control-navbar-sm: 1.875rem;
  --size-control-sm: 28px;
  --size-control-md: 32px;
  --size-touch-target: 44px;
  --size-spinner-lg: 40px;
  --size-empty-state-icon: 1.75rem;
  --size-display-icon: 2.75rem;
  --size-display-hero: 4rem;
  --size-card-min-height: 12.5rem;
  --size-avatar-lg: 100px;
  --size-avatar-md: 90px;
  --size-nav-icon: 1.5rem;
  --size-toast-width: 24rem;
  --container-max: 1200px;
  --size-content-min-width: 20rem;
  --size-diagram-max-width: 42.5rem;
  --size-protocol-affix: 13.3125rem;
  --size-protocol-affix-lg: 18.3125rem;
  --size-protocol-affix-xl: 16.4375rem;

  /* Typography */
  --font-family-base: "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 0.875rem;
  --line-height-base: 1.4286;
  --font-size-sm: 0.8rem;
  --font-size-xs: 0.75rem;
  --font-size-ui: 0.9rem;
  --font-size-body: 1rem;
  --font-size-body-lg: 1.125rem;
  --font-size-title-sm: 1.25rem;
  --font-size-display-sm: 1.75rem;
  --font-size-display-md: 2.625rem;

  /* Bootstrap bridge */
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-border-color: var(--border-subdued);
  --bs-secondary-color: var(--color-text-muted);
}

/* ── Dark theme ─────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg: #1a1d23;
  --color-bg-soft: #1e2128;
  --bg-element: #22262e;
  --bg-element-soft: #2a2e38;
  --bg-element-muted: #1e2128;
  --bg-element-strong: #0d0f12;

  --color-text: #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #8899a6;
  --color-text-muted-rgb: 136, 153, 166;
  --color-text-subtle: #a0aec0;
  --color-text-subtle-rgb: 160, 174, 192;
  --color-text-strong: #f1f5f9;
  --color-text-strong-rgb: 241, 245, 249;

  --color-neutral-100: #1e2128;
  --color-neutral-200: #2a2e38;
  --color-neutral-300: #3a3f4b;
  --color-neutral-400: #5a6070;

  /* Primary — lighter so outline/text contexts are readable on dark bg.
     Solid .btn-primary overrides text color to dark-navy in theme.css. */
  --color-primary: #7eb4f7;
  --color-primary-rgb: 126, 180, 247;
  --color-primary-hover: #96c4ff;
  --color-primary-light: #b8d6ff;
  --color-primary-soft: #1e2a4a;
  --color-primary-soft-border: #2d3f6e;
  --color-success-soft: #0d2218;
  --color-success-soft-border: #1a3d2a;
  --color-danger-soft: #2d0f0f;
  --color-danger-soft-border: #4a1a1a;
  --color-warning-soft: #2d2100;
  --color-warning-soft-border: #4a3800;
  --color-info-soft: #0d1e3a;
  --color-info-soft-border: #1a3060;
  --feedback-danger-soft: #2d0f0f;
  --feedback-danger-soft-hover: #3d1515;
  --feedback-warning-soft: #2d2100;

  --border-subdued: #2d3748;
  --border-strong: #374151;
  --border-muted: #4a5568;
  --border-contrast: #4a5568;
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-softer: rgba(255, 255, 255, 0.06);
  --border-overlay: rgba(255, 255, 255, 0.10);
  --border-overlay-strong: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(136, 153, 166, 0.20);
  --border-subtle-strong: rgba(136, 153, 166, 0.35);
  --border-muted-alpha: rgba(136, 153, 166, 0.14);
  --border-muted-alpha-strong: rgba(136, 153, 166, 0.20);

  --shadow-sm: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);
  --shadow-md: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0.5rem 2rem rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 0.75rem 2rem rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.4);

  --overlay-backdrop: rgba(0, 0, 0, 0.65);
  --overlay-surface-strong: rgba(34, 38, 46, 0.98);
  --overlay-surface-subtle: rgba(34, 38, 46, 0.6);
  --overlay-surface-soft: rgba(34, 38, 46, 0.35);
  --surface-elevated-muted: rgba(34, 38, 46, 0.78);
  --surface-elevated-soft: rgba(34, 38, 46, 0.72);
  --surface-elevated-strong: rgba(34, 38, 46, 0.9);
  --surface-elevated-topbar: rgba(26, 29, 35, 0.97);
  --surface-glass: rgba(34, 38, 46, 0.62);
  --surface-glass-strong: rgba(34, 38, 46, 0.80);
  --surface-glass-stronger: rgba(34, 38, 46, 0.88);
  --surface-glass-prominent: rgba(34, 38, 46, 0.96);
  --surface-glass-opaque: rgba(34, 38, 46, 0.99);
  --surface-selected-primary: rgba(76, 116, 230, 0.15);
  --surface-selected-primary-strong: rgba(76, 116, 230, 0.28);

  /* White token — used by evidentia.css and by .bg-white Bootstrap utility */
  --color-white: #22262e;
  --color-white-rgb: 34, 38, 46;
  --bs-white: #22262e;
  --bs-white-rgb: 34, 38, 46;

  /* Bootstrap bridge — body */
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-emphasis-color: var(--color-text-strong);
  --bs-emphasis-color-rgb: var(--color-text-strong-rgb);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-color: rgba(136, 153, 166, 0.50);

  /* Bootstrap bridge — backgrounds (progress track, bg-body-tertiary, bg-light, inputs) */
  --bs-secondary-bg: #2a2e38;
  --bs-secondary-bg-rgb: 42, 46, 56;
  --bs-tertiary-bg: #1e2128;
  --bs-tertiary-bg-rgb: 30, 33, 40;
  /* --bs-light-rgb drives .bg-light utility */
  --bs-light-rgb: 34, 38, 46;
  --bs-light-bg-subtle: #2a2e38;
  --bs-light-border-subtle: #3a3f4b;
  --bs-dark-bg-subtle: #0d0f12;
  --bs-dark-border-subtle: #22262e;

  /* Bootstrap bridge — cards */
  --bs-card-bg: var(--bg-element);
  --bs-card-cap-bg: var(--bg-element-soft);
  --bs-card-cap-color: var(--color-text-secondary);
  --bs-card-border-color: var(--border-subdued);

  /* Bootstrap bridge — borders */
  --bs-border-color: var(--border-subdued);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.10);

  /* Bootstrap bridge — primary sync */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);

  /* Bootstrap bridge — links */
  --bs-link-color: #7eb4f7;
  --bs-link-hover-color: #a5caff;
  --bs-link-color-rgb: 126, 180, 247;

  /* Bootstrap bridge — modals */
  --bs-modal-bg: var(--bg-element);
  --bs-modal-border-color: var(--border-subdued);
  --bs-modal-header-border-color: var(--border-subdued);
  --bs-modal-footer-border-color: var(--border-subdued);
  --bs-modal-inner-border-radius: var(--radius-lg);

  /* Bootstrap bridge — list-group & component active state */
  --bs-component-active-bg: var(--color-primary);
  --bs-component-active-color: #0a1829;
  --bs-list-group-active-bg: var(--color-primary);
  --bs-list-group-active-border-color: var(--color-primary);
  --bs-list-group-active-color: #0a1829;
  --bs-list-group-color: var(--color-text);
  --bs-list-group-bg: var(--bg-element);
  --bs-list-group-border-color: var(--border-subdued);
  --bs-list-group-action-hover-bg: var(--bg-element-soft);
  --bs-list-group-action-hover-color: var(--color-text);
  --bs-list-group-action-active-bg: var(--bg-element-strong);
  --bs-list-group-action-active-color: var(--color-text);

  /* Bootstrap bridge — dropdowns */
  --bs-dropdown-bg: var(--bg-element);
  --bs-dropdown-border-color: var(--border-subdued);
  --bs-dropdown-link-color: var(--color-text);
  --bs-dropdown-link-hover-bg: var(--bg-element-soft);
  --bs-dropdown-link-hover-color: var(--color-text-strong);
  --bs-dropdown-link-active-bg: var(--color-primary);
  --bs-dropdown-link-active-color: #0a1829;
  --bs-dropdown-divider-bg: var(--border-subdued);

  /* Bootstrap bridge — form inputs */
  --bs-form-control-bg: var(--bg-element);
  --bs-form-control-border-color: var(--border-muted);
  --bs-form-control-color: var(--color-text);

  /* Bootstrap bridge — contextual text on subtle backgrounds */
  --bs-primary-text-emphasis: #6ea8fe;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: var(--color-text-secondary);

  /* Bootstrap bridge — subtle backgrounds (badges, alerts) */
  --bs-primary-bg-subtle: #1e2a4a;
  --bs-success-bg-subtle: #0d2218;
  --bs-info-bg-subtle: #0d1e3a;
  --bs-warning-bg-subtle: #2d2100;
  --bs-danger-bg-subtle: #2d0f0f;

  /* Bootstrap bridge — subtle borders */
  --bs-primary-border-subtle: #2d3f6e;
  --bs-success-border-subtle: #1a3d2a;
  --bs-info-border-subtle: #1a3060;
  --bs-warning-border-subtle: #4a3800;
  --bs-danger-border-subtle: #4a1a1a;

  color-scheme: dark;
}