:root {
    /* Breakpoints */
    /* --breakpoint-xl: 1440px; */
    /* --breakpoint-lg: 1024px; */
    /* --breakpoint-md: 768px; */
    /* --breakpoint-sm: 480px; */

    /* Typography */
    /* --font-size-base: 16px; */
    /* --font-size-sm: 13px; */

    --primary-50: var(--B50);
    --primary-75: var(--B75);
    --primary-100: var(--B100);
    --primary-200: var(--B200);
    --primary-300: var(--B300);
    --primary-400: var(--B400);
    --primary-500: var(--B500);
    --primary-rgb: var(--B300-rgb);

    --primary-300-8: rgba(var(--primary-rgb), 0.08);
    --primary-300-16: rgba(var(--primary-rgb), 0.16);
    --primary-300-24: rgba(var(--primary-rgb), 0.24);
    --primary-300-32: rgba(var(--primary-rgb), 0.32);

    /*
     * Status scales
     */
    --error-50: var(--R50);
    --error-75: var(--R75);
    --error-100: var(--R100);
    --error-200: var(--R200);
    --error-300: var(--R300);
    --error-400: var(--R400);
    --error-500: var(--R500);
    --error-rgb: var(--R300-rgb);

    --error-300-8: rgba(var(--error-rgb), 0.08);
    --error-300-16: rgba(var(--error-rgb), 0.16);
    --error-300-24: rgba(var(--error-rgb), 0.24);
    --error-300-32: rgba(var(--error-rgb), 0.32);

    --success-50: var(--G50);
    --success-75: var(--G75);
    --success-100: var(--G100);
    --success-200: var(--G200);
    --success-300: var(--G300);
    --success-400: var(--G400);
    --success-500: var(--G500);
    --success-rgb: var(--G300-rgb);

    --success-300-8: rgba(var(--success-rgb), 0.08);
    --success-300-16: rgba(var(--success-rgb), 0.16);
    --success-300-24: rgba(var(--success-rgb), 0.24);
    --success-300-32: rgba(var(--success-rgb), 0.32);

    --warning-50: var(--Y50);
    --warning-75: var(--Y75);
    --warning-100: var(--Y100);
    --warning-200: var(--Y200);
    --warning-300: var(--Y300);
    --warning-400: var(--Y400);
    --warning-500: var(--Y500);
    --warning-rgb: var(--Y300-rgb);

    --warning-300-8: rgba(var(--warning-rgb), 0.08);
    --warning-300-16: rgba(var(--warning-rgb), 0.16);
    --warning-300-24: rgba(var(--warning-rgb), 0.24);
    --warning-300-32: rgba(var(--warning-rgb), 0.32);

    /* Semantic tokens */
    --primary-color: var(--primary-300);
    --secondary-color: "";

    --background-color: var(--NT10);
    --surface-color: var(--NT0);

    --error-color: var(--error-300);
    --success-color: var(--success-300);
    --warning-color: var(--warning-300);

    --on-primary-color: var(--NT0);
    --on-surface-color: var(--NT800);

    --text-primary: var(--NT800);
    --text-secondary: var(--NT500);
    --text-disabled: var(--NT200);

    --divider-color: var(--NT400);

    --border-color: var(--NT30);
    --border-color-success: var(--success-300);
    --border-color-error: var(--error-300);
    --border-color-warning: var(--warning-300);

    /*
     * Backward compatibility
     */
    --border--color: var(--border-color);
    --border--color-success: var(--border-color-success);
    --border--color-error: var(--border-color-error);
    --border--color-warning: var(--border-color-warning);
}