:root {
    /* ─── Colors ─── */
    /* Surfaces (background roles) */
    --color-surface-agent: #e4e5f3;
    --color-surface-user: #f1f2f2;
    --color-surface-menu: var(--color-surface-agent);

    /* Content (text, icons) */
    --color-content-primary: #001e63;
    --color-content-link: #0176d3;

    /* Borders / dividers */
    --color-border-subtle: #ffffff;

    /* ─── Typography ─── */
    --font-size-xs: 0.875rem; /* 14px */
    --font-size-s: 0.9375rem; /* 15px */
    --lineheight-s: 1.3;
    --weight-regular: 400;
    --font-family-regular: "ASICSFontRegular", sans-serif;
    --font-family-bold: "ASICSFontBold","ASICSFontRegular", sans-serif;


    /* ─── Spacing (4-pt scale) ─── */
    --space-1: 0.25rem; /* 4px  */
    --space-2: 0.5rem; /* 8px  */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-7: 1.75rem; /* 28px */
    --space-8: 2rem; /* 32px */

    /* Component-specific spacing */
    --space-option-vertical: var(--space-3);
    --space-option-horizontal: var(--space-5);


    /* ─── Radius ─── */
    /* Scale */
    --radius-xs: 0.25rem; /* 4px  */
    --radius-sm: 0.5rem; /* 8px  */
    --radius-md: 0.75rem; /* 12px */
    --radius-lg: 1rem; /* 16px */
    --radius-xl: 1.5rem; /* 24px */
    --radius-2xl: 2rem; /* 32px */

    /* Semantic/bubble radii */
    --radius-bubble-in: var(--radius-md) var(--radius-md) var(--radius-md) 0;
    --radius-bubble-out: var(--radius-md) var(--radius-md) 0 var(--radius-md);

    /* Other semantic radii */
    --radius-button-cta: var(--radius-xl);


    /* ─── Opacity ─── */
    --opacity-hover-medium: 0.7;

    /* Chat header logo size (default: 80px) */
    --logo-max-width: 5rem;

    /* Shadows */
    --shadow-notification: 0.1875rem 0.1875rem 0.5rem rgba(0, 0, 0, 0.30);
}