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

:root {
    --primary-color: #345eff;
    --secondary-color: #1e2c4f;
    --header-color: #1a1d21;
    --text-color: #6b7280;
    --text-light: #9ca3af;
    --font-family: "Inter", "Roboto", sans-serif;

    /* Derived colors */
    --primary-light: rgba(52, 94, 255, 0.08);
    --primary-medium: rgba(52, 94, 255, 0.15);

    /* Surface & Cards */
    --page-bg: #f0f2f7;
    --card-bg: #ffffff;
    --card-radius: 16px;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
    --card-border: 1px solid rgba(0, 0, 0, 0.04);

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Dividers */
    --divider-color: #e5e7eb;
}