:root {
    /* Warm gradient palette */
    --color-primary: #ff6b6b;
    --color-primary-dark: #ff4081;
    --color-primary-light: #ff8e53;
    --color-accent: #ff4757;
    --color-accent-glow: rgba(255, 32, 64, 0.5);

    /* Backgrounds */
    --bg-page: linear-gradient(145deg, #fef9f0 0%, #fff5e8 100%);
    --bg-card: #ffffff;
    --bg-card-warm: linear-gradient(135deg, #fff8f0 0%, #ffefdf 100%);
    --bg-card-blue: linear-gradient(120deg, #eef7ff, #e3f0fa);
    --bg-card-pink: linear-gradient(145deg, #fff5f7 0%, #ffeef1 100%);
    --bg-card-secondary: linear-gradient(145deg, #f5faff 0%, #ebf4fd 100%);

    /* Text */
    --text-primary: #2c3e4e;
    --text-secondary: #4a5b66;
    --text-muted: #7b8a8b;
    --text-accent: #e84342;
    --text-accent-strong: #d63031;
    --text-on-primary: #ffffff;

    /* Borders */
    --border-card: #ffe0d4;
    --border-soft: #ffccb3;
    --border-accent: #ff8fa3;
    --border-blue: #8cbef0;

    /* Chat */
    --chat-bg: #fefaf7;
    --chat-input-bg: #fff9f5;
    --chat-header-bg: #1798fc;
    --chat-bubble-user: #1798fc;
    --chat-bubble-bot: #ffffff;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 28px;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-3xl: 36px;
    --radius-round: 40px;
    --radius-pill: 60px;

    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 3px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 8px 20px rgba(255, 107, 107, 0.15);
    --shadow-button: 0 10px 28px rgba(255, 32, 64, 0.5);

    /* Font sizes */
    --fs-title: 26px;
    --fs-heading: 20px;
    --fs-subheading: 18px;
    --fs-body: 15px;
    --fs-small: 13px;
    --fs-caption: 12px;

    /* Breakpoints (for reference) */
    --bp-mobile: 428px;
    --bp-tablet: 768px;

    /* Animation */
    --ease-bounce: cubic-bezier(0.2, 0.9, 0.4, 1.1);
}