/* Zyklusversteher - Theme & Variables */

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

:root {
    /* Brand Colors */
    --zv-primary: #C06C84;
    --zv-primary-light: #D4899D;
    --zv-primary-dark: #9E4F66;
    --zv-secondary: #6C9A8B;
    --zv-secondary-light: #8FB8AB;
    --zv-secondary-dark: #4E7A6B;

    /* Phase Colors */
    --zv-phase-menstruation: #C06C84;
    --zv-phase-follikel: #6C9A8B;
    --zv-phase-ovulation: #F6B93B;
    --zv-phase-luteal: #786FA6;

    /* Phase Backgrounds (lighter) */
    --zv-phase-menstruation-bg: #FDE8EE;
    --zv-phase-follikel-bg: #E8F5F0;
    --zv-phase-ovulation-bg: #FFF5DD;
    --zv-phase-luteal-bg: #EFEDF5;

    /* Neutrals */
    --zv-bg: #FFF5F5;
    --zv-bg-card: #FFFFFF;
    --zv-bg-hover: #FFF0F0;
    --zv-text: #2D3436;
    --zv-text-secondary: #636E72;
    --zv-text-muted: #B2BEC3;
    --zv-border: #F0E0E3;
    --zv-border-light: #F8ECED;

    /* Semantic */
    --zv-success: #00B894;
    --zv-warning: #FDCB6E;
    --zv-danger: #E17055;
    --zv-info: #74B9FF;

    /* Shadows */
    --zv-shadow-sm: 0 1px 3px rgba(192, 108, 132, 0.08);
    --zv-shadow: 0 2px 8px rgba(192, 108, 132, 0.12);
    --zv-shadow-lg: 0 4px 16px rgba(192, 108, 132, 0.16);

    /* Spacing */
    --zv-radius: 12px;
    --zv-radius-sm: 8px;
    --zv-radius-lg: 16px;
    --zv-radius-full: 9999px;

    /* Font */
    --zv-font: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Transitions */
    --zv-transition: 0.2s ease;

    /* Sidebar */
    --zv-sidebar-width: 240px;
    --zv-nav-height: 64px;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--zv-font);
    color: var(--zv-text);
    background: var(--zv-bg);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--zv-primary); text-decoration: none; }
a:hover { color: var(--zv-primary-dark); }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

/* Severity Colors */
.severity-1 { color: var(--zv-success); }
.severity-2 { color: #55BE95; }
.severity-3 { color: var(--zv-warning); }
.severity-4 { color: #E89845; }
.severity-5 { color: var(--zv-danger); }

/* Phase Tag */
.phase-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--zv-radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
}

.phase-tag.menstruation { background: var(--zv-phase-menstruation-bg); color: var(--zv-phase-menstruation); }
.phase-tag.follikel { background: var(--zv-phase-follikel-bg); color: var(--zv-phase-follikel); }
.phase-tag.ovulation { background: var(--zv-phase-ovulation-bg); color: var(--zv-phase-ovulation); }
.phase-tag.luteal { background: var(--zv-phase-luteal-bg); color: var(--zv-phase-luteal); }