:root {
    /* Brand palette */
    --color-primary: #E3606B;
    --color-primary-light: #F08AA9;
    --color-primary-dark: #6C1228;

    /* Base colors */
    --color-bg-main: #FFF6F8;
    --color-white: #FFFFFF;
    --color-text-main: #333333;
    --color-text-light: #777777;
    --color-border-light: #F2F2F2;

    /* State colors */
    --color-success: #28A745;
    --color-warning: #FFC107;
    --color-danger: #DC3545;
    --color-info: #17A2B8;

    /* Decorative color */
    --color-gold: #C8A951;

    /* Extended UI tokens */
    --color-primary-hover: #C94A58;
    --color-star-inactive: #E0E0E0;
    --color-row-hover: #FFF0F3;
    --color-overlay-soft: rgba(255, 255, 255, 0.10);
    --color-shadow-soft: rgba(0, 0, 0, 0.05);
    --color-success-soft: rgba(40, 167, 69, 0.12);
    --color-warning-soft: rgba(255, 193, 7, 0.12);
    --color-danger-soft: rgba(220, 53, 69, 0.12);
    --color-info-soft: rgba(23, 162, 184, 0.12);
    --color-success-soft-strong: rgba(40, 167, 69, 0.24);
    --color-warning-soft-strong: rgba(255, 193, 7, 0.24);
    --color-danger-soft-strong: rgba(220, 53, 69, 0.24);
    --color-info-soft-strong: rgba(23, 162, 184, 0.24);
    --color-primary-soft: rgba(227, 96, 107, 0.18);
    --color-primary-dark-soft: rgba(108, 18, 40, 0.26);
    --color-backdrop: rgba(255, 255, 255, 0.72);
    --color-backdrop-strong: rgba(255, 255, 255, 0.88);
    --color-divider: rgba(227, 96, 107, 0.22);

    --color-shadow-medium: rgba(0, 0, 0, 0.10);
    --color-shadow-strong: rgba(0, 0, 0, 0.16);
    --color-shadow-primary: rgba(227, 96, 107, 0.28);

    --shadow-card: 0 2px 8px var(--color-shadow-soft);
    --shadow-elev-1: 0 8px 24px var(--color-shadow-soft);
    --shadow-elev-2: 0 16px 36px var(--color-shadow-medium);
    --shadow-elev-3: 0 22px 44px var(--color-shadow-strong);
}