/* ============================================================
   MeinHeimcheck · Brand Design Tokens
   ------------------------------------------------------------
   Quelle der Wahrheit: mhc-brand-pack/laravel/mhc-brand.css
   + mhc-brand-pack/docs/README.md (Brand-Pack v1).
   ============================================================ */

:root {
    /* -------- Brand-Palette (aus Brand-Pack) -------- */
    --mhc-navy:         #163259;   /* primär, Headlines, dark-BG */
    --mhc-navy-deep:    #0E2340;   /* hover/active */
    --mhc-amber:        #F5A524;   /* Akzent, CTA, Highlights */
    --mhc-amber-warm:   #E88910;   /* Amber in Logo + Icons, Hover */
    --mhc-sage:         #7A9B76;   /* Sekundär-Akzent (z.B. Eco/Natur) */
    --mhc-paper:        #FBF7EE;   /* Hintergrund, warm-weiß */
    --mhc-mist:         #E8DFD0;   /* Trennlinien, Hairlines */
    --mhc-ink:          #0F1821;   /* Text auf Paper */
    --mhc-white:        #FFFFFF;   /* Cards/Surfaces auf Paper */

    /* -------- Semantische Aliase (Framework-freundlich) -------- */
    --color-navy:          var(--mhc-navy);
    --color-navy-dark:     var(--mhc-navy-deep);
    --color-amber:         var(--mhc-amber);
    --color-amber-warm:    var(--mhc-amber-warm);
    --color-sage:          var(--mhc-sage);
    --color-paper:         var(--mhc-paper);
    --color-ink:           var(--mhc-ink);
    --color-mist:          var(--mhc-mist);

    --color-bg:            var(--mhc-paper);
    --color-surface:       var(--mhc-white);
    --color-text:          var(--mhc-ink);
    --color-text-mute:     #6B7280;                  /* Sekundärtext, Framework-Konvention */
    --color-border:        var(--mhc-mist);
    --color-primary:       var(--mhc-navy);
    --color-primary-hover: var(--mhc-navy-deep);
    --color-accent:        var(--mhc-amber);
    --color-accent-hover:  var(--mhc-amber-warm);

    /* -------- Feedback-Farben (bleiben im bekannten Spektrum) -------- */
    --color-success:       #16A34A;
    --color-warn:          #D97706;
    --color-danger:        #DC2626;
    --color-info:          #2563EB;

    /* -------- Typografie -------- */
    --font-display:        'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:           'Inter Tight', -apple-system, BlinkMacSystemFont,
                           'Segoe UI', Roboto, sans-serif;
    --font-mono:           'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* -------- Spacing-Scale (4 px base) -------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* -------- Radius -------- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 999px;

    /* -------- Shadow (Navy-tinted, weicher als Schwarz) -------- */
    --shadow-sm: 0 1px 2px   rgba(22, 50, 89, 0.05);
    --shadow-md: 0 4px 12px  rgba(22, 50, 89, 0.08);
    --shadow-lg: 0 12px 32px rgba(22, 50, 89, 0.12);

    /* -------- Transitions -------- */
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
}

/* ------------------------------------------------------------
   Minimal-Reset (optional – greift nur auf * selbst-selektiert)
   Die bestehenden Stylesheets definieren ihre eigenen Resets;
   wir setzen hier nur die harmlosen Fundamente.
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------
   Body + Headings — NUR Font-Family wird auf die neue Familie
   umgeschaltet. Farben/Layouts der bestehenden Seiten bleiben
   unverändert, weil sie ihre Regeln eigenständig definieren
   und CSS-Spezifität dort höher ist.
   ------------------------------------------------------------ */
body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
}