/* ═══════════════════════════════════════════════════
   tokens.css – Farben, Schriften, Variablen
   Brand: Blue #4A9EF5 · Green #5EBD3D · Teal #5A9E8F · Coral #F06080
   ═══════════════════════════════════════════════════ */

/* ─── LOCAL FONTS (GDPR-konform) ─── */
@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/Fraunces-Variable.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/Fraunces-Italic-Variable.woff2') format('woff2');
    font-weight: 400 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('/fonts/Outfit-Variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ─── DESIGN TOKENS ─── */
:root {
    /* Brand – Teal ersetzt Purple für ruhigere Wirkung */
    --brand-blue: #4A9EF5;
    --brand-green: #5EBD3D;
    --brand-teal: #5A9E8F;
    --brand-coral: #F06080;

    /* Soft tints */
    --blue-soft: #E8F2FE;
    --green-soft: #EAF5E4;
    --teal-soft: #E4F0ED;
    --coral-soft: #FDE8ED;

    /* Neutrals */
    --color-bg: #FAFAF8;
    --color-bg-warm: #F4F2EE;
    --color-bg-alt: #EFEEE9;
    --color-surface: #FFFFFF;
    --color-text: #1D1D1F;
    --color-text-secondary: #4A4A4D;
    --color-text-muted: #7C7C80;
    --color-border: #E0DDD8;
    --color-border-light: #ECEAE5;

    /* Typography */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Layout */
    --max-width: 1120px;
    --section-gap: clamp(4rem, 10vw, 8rem);
    --content-padding: clamp(1.25rem, 4vw, 2rem);

    /* Motion */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── DARK MODE OVERRIDES ─── */
@media (prefers-color-scheme: dark) {
    :root {
        --brand-teal: #6CD4BE;
        --teal-soft: #1A3D34;

        --brand-blue: #6CB4FF;
        --brand-green: #7DD65E;
        --brand-coral: #FF7A95;

        --blue-soft: #1A2E42;
        --green-soft: #1C3318;
        --coral-soft: #3D1A24;

        --color-bg: #1A1A1C;
        --color-bg-warm: #1F1F22;
        --color-bg-alt: #252528;
        --color-surface: #222225;
        --color-text: #F0F0F2;
        --color-text-secondary: #C5C5CA;
        --color-text-muted: #949499;
        --color-border: #333338;
        --color-border-light: #2A2A2E;
    }

    /* Schrift erscheint auf dunklem Hintergrund dünner –
       leicht erhöhtes Gewicht und angepasstes Rendering gleichen das aus */
    body {
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
        font-weight: 420;
    }

    /* Fließtext etwas lockerer für bessere Lesbarkeit */
    .about__text p,
    .article-body p,
    .legal-body p,
    .faq-item__answer p,
    .service-card p,
    .approach-item p,
    .contact-info__note {
        line-height: 1.9;
    }
}