:root {
    /*
     * Website UI palette
     *
     * The turquoise and purple BLX logo colors remain inside the logo assets.
     * Logo yellow is exposed only for the deliberate "Improve." hero accent.
     */
    --blx-color-ui-primary: #0b4c62;
    --blx-color-ui-primary-hover: #07394a;
    --blx-color-ui-accent: #3caaa3;
    --blx-color-hero-highlight: #e5a100;

    /* Functional neutrals */
    --blx-color-text: #18272f;
    --blx-color-text-muted: #52646d;
    --blx-color-surface: #ffffff;
    --blx-color-surface-soft: #f1f4f4;
    --blx-color-surface-accent-soft: #e6f3f2;
    --blx-color-border: #cbd5d8;
    --blx-color-border-strong: #9eafb6;
    --blx-color-disabled: #cfd3d5;

    /* Interaction states */
    --blx-color-action-primary-bg: var(--blx-color-ui-primary);
    --blx-color-action-primary-fg: var(--blx-color-surface);
    --blx-color-action-primary-hover-bg: var(--blx-color-ui-primary-hover);
    --blx-color-action-secondary-bg: var(--blx-color-surface);
    --blx-color-action-secondary-fg: var(--blx-color-ui-primary);
    --blx-color-action-secondary-border: var(--blx-color-ui-primary);
    --blx-color-action-secondary-hover-bg: var(--blx-color-surface-accent-soft);
    --blx-color-action-secondary-hover-border: var(--blx-color-ui-primary);
    --blx-color-focus: var(--blx-color-ui-primary);

    /* RGB channels for translucent colors */
    --blx-color-ui-primary-rgb: 11 76 98;
    --blx-color-ui-accent-rgb: 60 170 163;
    --blx-color-text-rgb: 24 39 47;
    --blx-color-surface-rgb: 255 255 255;
    --blx-color-black-rgb: 0 0 0;
}