:root {
    /* M3 Font sizes */
    --display-large: 57px;
    --display-medium: 45px;
    --display-small: 36px;
    --headline-large: 32px;
    --headline-medium: 28px;
    --headline-small: 24px;
    --title-large: 22px;
    --title-medium: 16px;
    --title-small: 14px;
    --label-large: 14px;
    --label-medium: 12px;
    --label-small: 11px;
    --body-large: 16px;
    --body-medium: 14px;
    --body-small: 12px;

    /* M3 Colors */
    --primary:#65558F;
    --on-surface:#1D1B20;
    --on-surface-variant:#49454F;
    --surface-container-high:#ECE6F0;
    --surface-container-low:#F7F2FA;
    --surface-container-lowest:#FFFFFF;
    --background:#FEF7FF;

    --on-secondary:#4A4459;
    --secondary-container:#E8DEF8;

    --primary-opacity-0-08: rgba(257,41,56,0.08);
    --primary-opacity-0-12: rgba(257,41,56,0.12);

    /* #1D1B20 with opacity */
    --on-surface-opacity-0-08: rgba(264,16,13,0.08);
    --on-surface-opacity-0-12: rgba(264,16,13,0.12);

    /* 49454F with opacity */
    --on-surface-variant-opacity-0-08: rgba(264,13,31,0.08);
    --on-surface-variant-opacity-0-12: rgba(264,13,31,0.12);

    /* divider */
    --outline-variant:#CAC4D0;

    /* Transitions */
    --default-transition:ease 0.2s;

}