:root {
    --bs-assigned: #e1ebff;
    --bs-blue: #0d6efd;
    --bs-cyan: #0dcaf0;
    --bs-danger: #dc3545;
    --bs-dark: #212529;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-light: #abb0c1;
    --bs-green: #198754;
    --bs-indigo: #d6d6ea;
    --bs-info: #0dcaf0;
    --bs-light: #f8f9fa;
    --bs-muted: #bdb9a6;
    --bs-orange: #fd7e14;
    --bs-pink: #e42d7f;
    --bs-primary: #2e245a;
    --bs-primary-50: rgb(46, 36, 90, 0.5);
    --bs-purple: #6f42c1;
    --bs-red: #dc3545;
    --bs-secondary: #6c757d;
    --bs-success: #28a745;
    --bs-teal: #20c997;
    --bs-warning: #ffc107;
    --bs-white: #fff;
    --bs-yellow: #ffc107;

    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;

    --sp-neutral-100: #f6f7f9;
    --sp-neutral-200: #e1e5eb;

    /* SPOTER DESIGN variables */

    /* Background */
    --sp-bg-default: #fff;
    --sp-bg-surface: #f8f9fa;
    --sp-bg-elevated: #fff;
    --sp-bg-subtle: #f6f7f9;

    /* Text */
    --sp-text-primary: #212529;
    --sp-text-secondary: #6c757d;
    --sp-text-muted: #bdb9a6;
    --sp-text-inverse: #fff;
    --sp-text-link: #058fff;

    /* Border */
    --sp-border-default: #dde2e6;
    --sp-border-strong: #abb0c1;

    /* Actions */
    --sp-action-primary: #2e245a;
    --sp-action-primary-hover: #423678;
    --sp-action-accent: #e42d7f;

    /* States */
    --sp-state-success: #28a745;
    --sp-state-warning: #ffc107;
    --sp-state-danger: #dc3545;
    --sp-state-info: #0dcaf0;

    /* Shadows */
    --sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sp-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --sp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* CHAT – WhatsApp style */
    --sp-chat-bg: #f6f7f9;
    --sp-chat-bubble-self-bg: #c2def3;
    --sp-chat-bubble-self-text: #212529;
    --sp-chat-bubble-other-bg: #fff;
    --sp-chat-bubble-other-text: #212529;
    --sp-chat-link: #e42d7f;
}