:root {
    /* Colors - Modern Palette */
    --primary-color: #2e3293;
    /* Truong Hoc An Toan Indigo */
    --primary-dark: #1e2270;
    --primary-light: #ecedf9;
    --primary-color-text: #444db0;

    --secondary-color: #ff9900;
    /* Orange Accent */
    --secondary-dark: #e68a00;

    --accent-color: #ff4757;
    /* Notification/Alert */

    /* Neutral Colors */
    --text-color: #2d3436;
    /* Softer Dark Gray */
    --text-light: #636e72;
    --text-light-gray: #a0a0a0;
    --white: #ffffff;
    --light-bg: #f5f6fa;
    /* Cool Gray Background */
    --border-color: #dfe6e9;

    /* Typography */
    --font-primary: 'Merriweather', serif;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 64px;
    /* Increased for better breathing room */

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    /* More rounded */
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Modern Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 20px 40px rgba(46, 50, 147, 0.15);
    /* Colored shadow */

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Buttons (ce-btn) */
    --ce-btn-radius: var(--radius-full);
    --ce-btn-height-lg: 52px;
    --ce-btn-height-md: 44px;
    --ce-btn-height-sm: 36px;
    --ce-btn-height-mini: 28px;
    --ce-btn-padding-x-lg: 28px;
    --ce-btn-padding-x: 24px;
    --ce-btn-padding-x-sm: 16px;
    --ce-btn-padding-x-mini: 8px;
    --ce-btn-font-size: 16px;
    --ce-btn-font-size-sm: 14px;
    --ce-btn-font-weight: 700;
    --ce-btn-gap: 8px;
    --ce-btn-transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);

    --ce-btn-primary-bg: linear-gradient(135deg, var(--primary-color), #383c97);
    --ce-btn-primary-hover-bg: linear-gradient(135deg, var(--primary-color), #444db0);
    --ce-btn-primary-text: var(--white);

    --ce-btn-secondary-bg: linear-gradient(135deg, var(--secondary-color), #e08a1f);
    --ce-btn-secondary-hover-bg: linear-gradient(135deg, var(--secondary-color), #fb7f02);
    --ce-btn-secondary-text: var(--white);

    --ce-btn-outline-border: var(--primary-color);
    --ce-btn-outline-text: var(--primary-color);
    --ce-btn-outline-hover-bg: var(--primary-color);
    --ce-btn-outline-hover-text: var(--white);

    --ce-btn-danger-bg: var(--accent-color);
    --ce-btn-danger-hover-bg: #d00012;
    --ce-btn-danger-text: var(--white);
    --ce-btn-danger-outline-border: var(--accent-color);
    --ce-btn-danger-outline-text: var(--accent-color);

    --ce-btn-ghost-bg: var(--white);
    --ce-btn-ghost-border: var(--border-color);
    --ce-btn-ghost-text: var(--text-light);
    --ce-btn-ghost-hover-border: var(--primary-color);
    --ce-btn-ghost-hover-text: var(--primary-color);

    --ce-btn-default-bg: var(--white);
    --ce-btn-default-border: var(--border-color);
    --ce-btn-default-text: var(--text-color);
    --ce-btn-default-hover-bg: var(--primary-color);
    --ce-btn-default-hover-text: var(--white);

    --ce-btn-text-color: var(--primary-color);
    --ce-btn-text-danger-color: var(--accent-color);
    --ce-btn-focus-ring: rgba(46, 50, 147, 0.2);

    /* Container */
    --container-width: 1200px;
}