:root {
    color-scheme: light;
    --g-blue: #4285f4;
    --g-red: #ea4335;
    --g-yellow: #fbbc05;
    --g-green: #34a853;

    --ink: #202124;
    --soft: #5f6368;
    --surface: #f8f9fb;
    --hairline: rgba(32, 33, 36, 0.08);

    --bg-hero-gradient: linear-gradient(180deg, #ffffff 0%, #fffdfa 40%, #faf9f6 75%, #f8f9fb 100%);
    --bg-surface-gradient: linear-gradient(180deg, #f8f9fb 0%, #faf9f6 50%, #ffffff 100%);
    --bg-surface-alt-gradient: linear-gradient(180deg, #ffffff 0%, #faf9f6 50%, #f8f9fb 100%);
    --bg-card-gradient: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);

    --background: hsl(0 0% 100%);
    --foreground: #202124;
    --card: hsl(0 0% 100%);
    --card-foreground: #202124;
    --popover: hsl(0 0% 100%);
    --popover-foreground: #202124;
    --primary: #202124;
    --primary-foreground: hsl(0 0% 100%);
    --secondary: hsl(220 14% 96%);
    --secondary-foreground: hsl(220 9% 14%);
    --muted: hsl(220 14% 96%);
    --muted-foreground: hsl(220 5% 40%);
    --accent: hsl(220 14% 96%);
    --accent-foreground: hsl(220 9% 14%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 100%);
    --border: hsl(220 13% 91%);
    --input: hsl(220 13% 91%);
    --ring: hsl(217 89% 61%);
    --radius: 1rem;

    --container-max: 80rem;
    --container-padding: 1.25rem;

    --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Outfit", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-3-5: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --transition-fast: 150ms;
    --transition-base: 300ms;
    --transition-slow: 400ms;
    --transition-slower: 1000ms;
}

@media (min-width: 640px) {
    :root {
        --container-padding: 2rem;
    }
}