@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
    /* Brand colors */
    --color-primary: #3700FE;
    --color-primary-dark: #2B00C8;
    --color-secondary: #00c896;
    --color-cyan: #2BD9E2;
    --color-accent: #ffb800;
    --color-info: #34aadf;

    /* Text colors */
    --text-dark: #1c1e1f;
    --text-main: #333333;
    --text-secondary: #666666;
    --text-secondary-60: color-mix(in srgb, var(--text-secondary) 60%, white);
    --text-white: #ffffff;

    /* Surfaces */
    --bg-white: #ffffff;
    --bg-light: #f9ffff;
    --bg-gray-light: #f8f9fa;
    --bg-muted: #f0f0f0;
    --border-light: #e8eaed;
    --border-medium: #dadce0;

    /* Gradients */
    --gradient-dark: linear-gradient(135deg, #1a1a2e, #16213e);

    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);

    /* Typography */
    --font-family: 'Nunito', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3rem;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;

    /* Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 50px;
    --radius-round: 50%;

    /* Motion */
    --transition-base: all 0.3s ease;

    /* Layout */
    --z-index-sticky: 1020;
    --container-max-width: 1280px;
    --container-padding: 1rem;
    --header-height: 70px;
}