/**
 * ==========================================================================
 * THEME-TOKENS: FENSTERPUTZER-WIEN.AT (Release 2026.1)
 * Visual Archetype: Imperial Heritage & Amber
 * (Kaiserliches Waldgrün, Warmes Messing, Alabaster & Handwerker-Gold)
 * 
 * Konform mit WCAG 2.1 AA (Kontrastverhältnisse: Fließtext >= 4.5:1, UI >= 3.0:1)
 * ==========================================================================
 */

:root {
  /* --- 1. Farbsystem: Imperial Heritage & Amber --- */
  /* Kaiserliches Waldgrün & Smaragd */
  --fp-color-brand-emerald: #064E3B;       /* Kaiserliches Waldgrün - Kontrast 9.72:1 vs Weiß */
  --fp-color-brand-emerald-hover: #04382A; /* Tiefes Waldgrün für Hover-States */
  --fp-color-brand-vibrant: #059669;       /* Frisches Handwerksgrün für Erfolgs-Badges */
  --fp-color-surface-mint: #E6F7F4;        /* Sanfte Mint-Tönung für Vertrauensboxen */
  --fp-color-accent-mint: #2DD4BF;         /* Klares Mint für Highlights */

  /* Warmes Messing & Amber (Handwerkerbonus-Akzent) */
  --fp-color-brass-primary: #D97706;       /* Warmes Messing / Amber */
  --fp-color-brass-dark: #B45309;          /* Dunkles Messing - Kontrast 5.02:1 vs Weiß (Fließtext-sicher) */
  --fp-color-brass-deep: #78350F;          /* Historisches Tiefmessing für Überschriften */
  --fp-color-gold-badge: #F59E0B;          /* Handwerkerbonus Gold Badge */
  --fp-color-gold-badge-text: #132E27;     /* Kontrast 6.75:1 vs #F59E0B */
  --fp-color-bonus-pill-bg: #FEF3C7;       /* Warmes Alabaster-Amber für Badges */

  /* Canvas & Alabaster-Oberflächen */
  --fp-canvas: #FBFDFB;                    /* Alabaster-Warmweiß für Seitenhintergrund */
  --fp-canvas-warm: #FFFBEB;               /* Zartes Warmweiß für Akzentsektionen */
  --fp-surface-card: #FFFFFF;              /* Reines Weiß für Karten & Formulare */
  --fp-surface-muted: #F3F4F6;             /* Sanftes Hellgrau */

  /* Typografische Textfarben */
  --fp-text-primary: #132E27;              /* Tiefsmaragd-Anthrazit - Kontrast 14.19:1 vs Canvas */
  --fp-text-secondary: #374151;            /* Schiefer-Anthrazit - Kontrast 10.08:1 vs Canvas */
  --fp-text-muted: #4B5563;                /* Muted Slate - Kontrast 7.02:1 vs Weiß */
  --fp-text-inverse: #FFFFFF;

  /* Rahmen & Konturen (WCAG 1.4.11 konform) */
  --fp-border-soft: #D1FAE5;               /* Sanfter Smaragd-Rahmen */
  --fp-border-card: #E5E7EB;               /* Standardkarten-Rahmen */
  --fp-border-control: #64748B;            /* Formular-Kontur - Kontrast 4.68:1 vs Canvas */
  --fp-border-focus: #064E3B;
  --fp-ring-focus: rgba(6, 78, 59, 0.22);

  /* --- 2. Typografie: Heritage Elegance & Contemporary Clarity --- */
  --fp-font-display: 'Playfair Display', Georgia, serif;
  --fp-font-sans: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --fp-font-mono: ui-monospace, 'SF Mono', Consolas, monospace;

  /* Typografische Skala */
  --fp-font-size-h1: clamp(2.35rem, 1.95rem + 2.2vw, 3.8rem);
  --fp-font-size-h2: clamp(1.85rem, 1.55rem + 1.4vw, 2.75rem);
  --fp-font-size-h3: clamp(1.35rem, 1.2rem + 0.6vw, 1.85rem);
  --fp-font-size-body: 1.05rem;

  /* --- 3. Radien & Schatten (Haptische Wiener Handwerks-Ästhetik) --- */
  --fp-radius-sm: 8px;
  --fp-radius-md: 14px;
  --fp-radius-lg: 20px;
  --fp-radius-xl: 28px;
  --fp-radius-pill: 9999px;

  --fp-shadow-gentle: 0 4px 14px rgba(19, 46, 39, 0.05), 0 1px 3px rgba(19, 46, 39, 0.02);
  --fp-shadow-card: 0 10px 28px -5px rgba(19, 46, 39, 0.08), 0 8px 12px -6px rgba(19, 46, 39, 0.03);
  --fp-shadow-wizard-active: 0 14px 34px -4px rgba(6, 78, 59, 0.18);
  --fp-shadow-hover: 0 18px 40px -8px rgba(6, 78, 59, 0.16);

  /* --- 4. Backward-Compatibility Bridge zu bestehenden Klassen (--nc-*) --- */
  --nc-teal: var(--fp-color-brand-emerald);
  --nc-teal-dark: var(--fp-color-brand-emerald-hover);
  --nc-teal-light: var(--fp-color-surface-mint);
  --nc-mint: var(--fp-color-accent-mint);
  --nc-amber: var(--fp-color-brass-primary);
  --nc-amber-light: var(--fp-color-bonus-pill-bg);
  --nc-navy: var(--fp-color-brand-emerald);
  --nc-navy-dark: #042E23;
  --nc-slate: var(--fp-text-primary);
  --nc-muted: var(--fp-text-muted);
  --nc-line: #E5E7EB;
  --nc-bg: var(--fp-canvas);
  --nc-white: var(--fp-surface-card);
  --nc-radius-sm: var(--fp-radius-sm);
  --nc-radius: var(--fp-radius-md);
  --nc-radius-lg: var(--fp-radius-lg);
  --nc-glass-bg: rgba(255, 255, 255, 0.88);
  --nc-glass-border: rgba(209, 250, 229, 0.6);
  --nc-glass-shadow: var(--fp-shadow-card);
  --nc-glass-shadow-hover: var(--fp-shadow-hover);
}

/* Base Body Enhancements */
body {
  background-color: var(--fp-canvas);
  color: var(--fp-text-primary);
  font-family: var(--fp-font-sans);
}

/* Headlines mit Traditionellem Handwerks-Charakter */
h1, h2, h3, .brand-font {
  font-family: var(--fp-font-display);
  letter-spacing: -0.015em;
}

/* Handwerkerbonus Badge Stil */
.handwerkerbonus-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--fp-color-bonus-pill-bg);
  color: var(--fp-color-brass-dark);
  border: 1px solid var(--fp-color-gold-badge);
  border-radius: var(--fp-radius-pill);
  padding: 6px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Buttons */
.btn-primary, .btn-teal {
  background-color: var(--fp-color-brand-emerald) !important;
  color: #FFFFFF !important;
  border-radius: var(--fp-radius-md);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover, .btn-teal:hover {
  background-color: var(--fp-color-brand-emerald-hover) !important;
  box-shadow: var(--fp-shadow-wizard-active);
  transform: translateY(-2px);
}

.btn-amber {
  background-color: var(--fp-color-brass-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--fp-radius-md);
}

.btn-amber:hover {
  background-color: var(--fp-color-brass-dark) !important;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.28);
  transform: translateY(-2px);
}