:root {
    --color-pink-50: #fce4ec;
    --color-pink-100: #f8bbd0;
    --color-pink-200: #f48fb1;
    --color-pink-300: #f06292;
    --color-pink-400: #ec407a;
    --color-pink-500: #FF3D8C;
    --color-pink-600: #e91e63;
    --color-pink-700: #c2185b;
    --color-pink-800: #ad1457;
    --color-pink-900: #880e4f;

    --color-black-50: rgba(0, 0, 0, 0.1);
    --color-black-100: #e0e0e0;
    --color-black-200: #bdbdbd;
    --color-black-300: #9e9e9e;
    --color-black-400: #0000001a;
    --color-black-500: #00000026;
    --color-black-600: #424242;
    --color-black-700: #303030;
    --color-black-800: #212121;
    --color-black-900: #000000;

    --color-white-50: #a6a6a6;
    --color-white-100: #b3b3b3;
    --color-white-200: #bfbfbf;
    --color-white-300: #cccccc;
    --color-white-400: #d6d6d6;
    --color-white-500: #e0e0e0;
    --color-white-600: #f0f0f0;
    --color-white-700: #f5f5f5;
    --color-white-800: #fafafa;
    --color-white-900: #ffffff;

    --color-navbar-background: #007BFF08;

    --header-height: 80px;
    --transition-speed: 0.3s;
    --primary-pink: var(--color-pink-900);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
}



:root {
    --primary: #FF2D78;
    --primary-light: #FF5C97;
    --primary-dark: #D91A5F;
    --primary-glow: rgba(255, 45, 120, 0.15);
    --bg-primary: #F8F9FA;
    --bg-card: #FFFFFF;
    --bg-tertiary: #F1F3F5;
    --text-primary: #1A1A1A;
    --text-secondary: #4A5568;
    --text-muted: #718096;
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-active: rgba(255, 45, 120, 0.3);
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}