/* Design Tokens for BeFlowed - based on be-flowed.de */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600&family=Sulphur+Point:wght@300;400;700&display=swap');

:root {
    /* Brand Colors */
    --color-purple-primary: #AA6DC7;
    --color-purple-accent: #906DF7;
    --color-purple-dark: #6767C2;
    --color-teal: #3EA39B;
    --color-teal-dark: #149183;
    --color-pink: #FEB8FF;
    --color-cyan: #ABEFFF;

    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-white-muted: rgba(255, 255, 255, 0.73);
    --color-white-subtle: rgba(255, 255, 255, 0.45);
    --color-gray-light: #D9D9D9;
    --color-dark-bg: rgba(54, 55, 71, 0.25);
    --color-dark-overlay: rgba(0, 0, 0, 0.15);

    /* Semantic Colors */
    --color-primary: var(--color-pink);
    --color-primary-hover: rgba(254, 184, 255, 0.15);
    --color-text: var(--color-white);
    --color-text-muted: var(--color-white-muted);
    --color-text-subtle: var(--color-white-subtle);
    --color-border: rgba(255, 255, 255, 0.13);
    --color-border-accent: var(--color-pink);
    --color-focus: var(--color-cyan);

    /* Background Gradient */
    --gradient-bg: radial-gradient(
        ellipse at 50% 100%,
        var(--color-teal-dark) 0%,
        var(--color-purple-dark) 40%,
        var(--color-purple-primary) 100%
    );

    /* Status Colors */
    --color-success: #4ade80;
    --color-success-bg: rgba(74, 222, 128, 0.15);
    --color-error: #f87171;
    --color-error-bg: rgba(248, 113, 113, 0.15);
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, 0.15);
    --color-info: var(--color-cyan);
    --color-info-bg: rgba(171, 239, 255, 0.15);

    /* Typography */
    --font-family-display: "Sulphur Point", sans-serif;
    --font-family-body: "Source Sans 3", sans-serif;
    --font-family: var(--font-family-body);

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;
    --font-size-display: 3.5em;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    --line-height-tight: 1.125;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    --letter-spacing-tight: -0.025rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --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-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-full: 3rem;

    /* Shadows */
    --shadow-sm: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.5rem 2rem rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 1rem 5rem rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 2rem rgba(254, 184, 255, 0.3);

    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.13);
    --glass-blur: blur(0.5rem);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Container */
    --container-max: 70rem;
    --container-narrow: 32rem;
    --container-content: 50rem;
    --container-padding: 3rem;
    --container-padding-mobile: 1.5rem;

    /* Layout */
    --header-height: 5rem;
    --footer-padding: 3rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    :root {
        --container-padding: var(--container-padding-mobile);
        --font-size-display: 2.5em;
        --space-20: 3rem;
        --space-24: 4rem;
    }
}