: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: #6c757d;
  --color-text-muted-rgb: 108, 117, 125;
  --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);
}