:root{
  --ui-bg-main: #F6F7F4;
  --ui-bg-card: #FFFFFF;
  --ui-border: #D6DBDF;

  --ui-text-primary: #1F2933;
  --ui-text-secondary: #5F6B7A;
  --ui-text-muted: #9AA5B1;

  --ui-brand-primary: #2F5D50;
  --ui-brand-hover: #244B40;
  --ui-brand-soft: #8FB7A2;

  --ui-accent-gold: #C9A24D;
  --ui-accent-soft: #F2E3B3;

  --ui-success: #2E7D32;
  --ui-info: #4A6FA5;
  --ui-warning: #E0A800;
  --ui-danger: #B23A48;

  --ui-focus-ring: rgba(143,183,162,.45);

  /* RGB helpers (Bootstrap wants rgb vars often) */
  --ui-bg-main-rgb: 246,247,244;
  --ui-bg-card-rgb: 255,255,255;
  --ui-border-rgb: 214,219,223;

  --ui-text-primary-rgb: 31,41,51;
  --ui-text-secondary-rgb: 95,107,122;
  --ui-text-muted-rgb: 154,165,177;

  --ui-brand-primary-rgb: 47,93,80;
  --ui-brand-hover-rgb: 36,75,64;
  --ui-brand-soft-rgb: 143,183,162;

  --ui-accent-gold-rgb: 201,162,77;
  --ui-success-rgb: 46,125,50;
  --ui-info-rgb: 74,111,165;
  --ui-warning-rgb: 224,168,0;
  --ui-danger-rgb: 178,58,72;

  /* Body / typography */
    --bs-body-bg: var(--ui-bg-main);
    --bs-body-bg-rgb: var(--ui-bg-main-rgb);
    --bs-body-color: var(--ui-text-primary);
    --bs-body-color-rgb: var(--ui-text-primary-rgb);

    --bs-emphasis-color: var(--ui-text-primary);
    --bs-emphasis-color-rgb: var(--ui-text-primary-rgb);

    --bs-secondary-color: var(--ui-text-secondary);
    --bs-secondary-color-rgb: var(--ui-text-secondary-rgb);

    --bs-tertiary-color: var(--ui-text-muted);
    --bs-tertiary-color-rgb: var(--ui-text-muted-rgb);

    --bs-heading-color: var(--ui-text-primary);

    /* Surfaces / borders */
    --bs-border-color: var(--ui-border);
    --bs-border-color-translucent: rgba(var(--ui-border-rgb), .55);

    --bs-light: var(--ui-bg-card);
    --bs-light-rgb: var(--ui-bg-card-rgb);

    /* “Dark” in your system is ink text (not olive) */
    --bs-dark: var(--ui-text-primary);
    --bs-dark-rgb: var(--ui-text-primary-rgb);

    /* Core theme colors (mapped) */
    --bs-primary: var(--ui-brand-primary);
    --bs-primary-rgb: var(--ui-brand-primary-rgb);

    /* You don’t have a UI secondary token; use text-secondary as “secondary” color */
    --bs-secondary: var(--ui-text-secondary);
    --bs-secondary-rgb: var(--ui-text-secondary-rgb);

    --bs-success: var(--ui-success);
    --bs-success-rgb: var(--ui-success-rgb);

    --bs-info: var(--ui-info);
    --bs-info-rgb: var(--ui-info-rgb);

    --bs-warning: var(--ui-warning);
    --bs-warning-rgb: var(--ui-warning-rgb);

    --bs-danger: var(--ui-danger);
    --bs-danger-rgb: var(--ui-danger-rgb);

    /* Links */
    --bs-link-color: var(--ui-brand-primary);
    --bs-link-color-rgb: var(--ui-brand-primary-rgb);
    --bs-link-hover-color: var(--ui-brand-hover);
    --bs-link-hover-color-rgb: var(--ui-brand-hover-rgb);

    /* Focus ring */
    --bs-focus-ring-color: var(--ui-focus-ring);
    --bs-focus-ring-width: .25rem;
    --bs-focus-ring-opacity: 1;

    /* Subtle backgrounds (for alerts, badges, soft UI) */
    --bs-primary-bg-subtle: rgba(var(--ui-brand-primary-rgb), .12);
    --bs-success-bg-subtle: rgba(var(--ui-success-rgb), .12);
    --bs-info-bg-subtle: rgba(var(--ui-info-rgb), .12);
    --bs-warning-bg-subtle: rgba(var(--ui-warning-rgb), .14);
    --bs-danger-bg-subtle: rgba(var(--ui-danger-rgb), .12);

    --bs-primary-border-subtle: rgba(var(--ui-brand-primary-rgb), .28);
    --bs-success-border-subtle: rgba(var(--ui-success-rgb), .28);
    --bs-info-border-subtle: rgba(var(--ui-info-rgb), .28);
    --bs-warning-border-subtle: rgba(var(--ui-warning-rgb), .32);
    --bs-danger-border-subtle: rgba(var(--ui-danger-rgb), .28);

    /* Text emphasis tokens (Bootstrap uses these in some components) */
    --bs-primary-text-emphasis: var(--ui-brand-hover);
    --bs-success-text-emphasis: #1E5A24;
    --bs-info-text-emphasis: #2E4A71;
    --bs-warning-text-emphasis: #6A4D00;
    --bs-danger-text-emphasis: #7A1E28;
}