@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Typography */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Primary Colors - Modern Rose */
    --color-primary: #E11D48;
    --color-primary-hover: #BE123C;
    --color-primary-light: #FFF1F2;

    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-background: #FAFAFA;
    --color-surface: #FFFFFF;
    --color-border: #E4E4E7;
    --color-border-light: #F4F4F5;

    /* Text Colors */
    --color-text-primary: #18181B;
    --color-text-secondary: #71717A;
    --color-text-muted: #A1A1AA;

    /* Semantic Colors */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* Legacy variable mappings for compatibility */
    --main_page_background: var(--color-background);
    --main_primary_color: var(--color-primary);
    --header_height: 64px;
    --header_background: var(--color-white);
    --header_border_bottom: 1px solid var(--color-border-light);
    --common_body_background: var(--color-background);
    --common_page_background: var(--color-surface);
    --common_page_shadow: var(--shadow-card);
    --common_page_border_radius: var(--radius-lg);
    --button_border_radius: var(--radius-full);
    --button_primary_color: var(--color-primary);
    --button_primary_hover_color: var(--color-primary-hover);
    --button_primary_text_color: var(--color-white);
    --text_primary: var(--color-text-primary);
    --text_sub_title: var(--color-text-secondary);
    --input_text_border: 1px solid var(--color-border);
    --input_text_border_focus: 2px solid var(--color-primary);
}