/* ═══════════════════════════════════════════════════════════════════════
   FONTS — Self-hosted Inter (GDPR)
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {

    /* ═══════════════════════════════════════════════════════════════════
       COLORS
       ═══════════════════════════════════════════════════════════════════ */

    /* ─── Accent (Primary Brand) ───────────────────────────────────── */
    --accent:          #2E7D99;
    --accent-hover:    #266D86;
    --accent-subtle:   #EDF5F8;

    /* ─── Warm Gray (Stone) ────────────────────────────────────────── */
    --gray-50:   #FAFAF9;
    --gray-100:  #F5F5F4;
    --gray-200:  #E7E5E4;
    --gray-300:  #D6D3D1;
    --gray-400:  #A8A29E;
    --gray-500:  #78716C;
    --gray-600:  #57534E;
    --gray-700:  #44403C;
    --gray-800:  #292524;
    --gray-900:  #1C1917;

    /* ─── Semantic Text & UI ───────────────────────────────────────── */
    --color-heading:     var(--gray-900);
    --color-text:        var(--gray-800);
    --color-secondary:   var(--gray-600);
    --color-muted:       var(--gray-500);
    --color-placeholder: var(--gray-400);
    --color-border:      var(--gray-200);
    --bg-page:           var(--gray-50);
    --bg-white:          #FFFFFF;
    --bg-dark:           var(--gray-900);

    /* ─── Status (Base) ────────────────────────────────────────────── */
    --success:    #4A8A68;
    --success-bg: #EDF4F0;
    --warning:    #C9A030;
    --warning-bg: #FDF8EC;
    --error:      #C24545;
    --error-bg:   #F8EDED;

    /* ─── Extended Status Colors (Design System) ───────────────────── */
    --status-blue:   #5A7EA5;   /* Schieferblau */
    --status-indigo: #6E6E9E;   /* Staubiges Indigo */
    --status-purple: #8A729E;   /* Staubiges Lila */
    --status-pink:   #B06178;   /* Altrosa */
    --status-teal:   #4A9A8E;   /* Gedämpftes Teal */
    --status-cyan:   #4A8FA0;   /* Gedämpftes Cyan */
    --status-orange: #C27A3E;   /* Gebranntes Orange */
    --status-lime:   #7A9A4A;   /* Olive */
    --status-indigo-bg: rgba(110, 110, 158, 0.12);

    /* ═══════════════════════════════════════════════════════════════════
       TYPOGRAPHY
       ═══════════════════════════════════════════════════════════════════ */

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ─── Scale ────────────────────────────────────────────────────── */
    --text-hero: 48px;
    --text-3xl:  36px;
    --text-2xl:  24px;
    --text-xl:   20px;
    --text-lead: 19px;
    --text-base: 17px;
    --text-sm:   15px;
    --text-xs:   13px;

    /* ─── Weights ──────────────────────────────────────────────────── */
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;

    /* ─── Line Heights ─────────────────────────────────────────────── */
    --leading-tight:   1.1;
    --leading-snug:    1.2;
    --leading-normal:  1.6;
    --leading-relaxed: 1.8;

    /* ═══════════════════════════════════════════════════════════════════
       SPACING (4px grid)
       ═══════════════════════════════════════════════════════════════════ */

    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    /* ─── Semantic Gaps ────────────────────────────────────────────── */
    --gap-section: 64px;
    --gap-page:    96px;

    /* ═══════════════════════════════════════════════════════════════════
       LAYOUT
       ═══════════════════════════════════════════════════════════════════ */

    --zone-narrow:  640px;
    --zone-content: 960px;
    --zone-wide:    1120px;

    --bp-mobile:  480px;
    --bp-tablet:  768px;
    --bp-desktop: 1024px;

    --header-height: 76px;

    /* ═══════════════════════════════════════════════════════════════════
       VISUAL EFFECTS
       ═══════════════════════════════════════════════════════════════════ */

    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    --transition-fast:   150ms ease-out;
    --transition-normal: 200ms ease-out;
}