/**
 * TRUE CARE – Design Tokens
 * Extrahiert aus colors.png (Farbwelt-Design)
 * Alle Werte als CSS Custom Properties (kein Hardcoding)
 */

:root {

  /* ── Farben ────────────────────────────────────────────────────────────── */

  /* Primärfarbe: Gold – für Highlights, Linien, Icons, Secondary Buttons */
  --color-primary:          #b8986e;
  --color-primary-dark:     #9a7d58;
  --color-primary-light:    #d4b99a;

  /* Sekundärfläche: Beige – für Kartenflächen, Section-Hintergründe */
  --color-secondary:        #d9cab3;
  --color-secondary-light:  #ede5d9;

  /* Akzentfarbe: Terrakotta-Rot – für CTAs, Hover-States, Links */
  --color-accent:           #E05A3F;
  --color-accent-dark:      #c44a31;
  --color-accent-light:     #f07a62;

  /* Textfarben */
  --color-text-primary:     #3c3c3c;   /* Headlines & Body Text */
  --color-text-secondary:   #6b6b6b;   /* Subtext, Captions */
  --color-text-light:       #9e9e9e;   /* Platzhalter, deaktiviert */
  --color-text-inverted:    #FFFFFF;   /* Text auf dunklem Hintergrund */

  /* Hintergründe */
  --color-bg-light:         #fdf8f0;   /* Seitenhintergrund (Warmweiß) */
  --color-bg-white:         #FFFFFF;
  --color-bg-dark:          #2a2a2a;   /* Dunkle Sektionen */

  /* Status-Farben */
  --color-success:          #5a8a6e;
  --color-error:            #c0392b;
  --color-warning:          #e67e22;

  /* ── Typografie ────────────────────────────────────────────────────────── */

  /* Schriftfamilien (Google Fonts – werden in functions.php geladen) */
  --font-heading:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-accent:   'Cormorant Garamond', serif; /* Für Zitate, Labels */

  /* Schriftgrößen (Mobile First – fluid scaling) */
  --font-size-xs:   0.75rem;    /*  12px */
  --font-size-sm:   0.875rem;   /*  14px */
  --font-size-base: 1rem;       /*  16px */
  --font-size-md:   1.125rem;   /*  18px */
  --font-size-lg:   1.25rem;    /*  20px */
  --font-size-xl:   1.5rem;     /*  24px */
  --font-size-2xl:  1.875rem;   /*  30px */
  --font-size-3xl:  2.25rem;    /*  36px */
  --font-size-4xl:  3rem;       /*  48px */
  --font-size-5xl:  3.75rem;    /*  60px */

  /* Schriftgewichte */
  --font-weight-light:   400; /* Cormorant Garamond: Regular als Basis-Gewicht für Headlines (Figma-Abgleich) */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Zeilenhöhen */
  --line-height-tight:  1.2;
  --line-height-snug:   1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.75;

  /* Buchstabenabstand */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.1em;
  --letter-spacing-widest:  0.2em;

  /* ── Abstände (Spacing Scale) ───────────────────────────────────────────── */

  --spacing-2xs:  4px;
  --spacing-xs:   8px;
  --spacing-sm:  12px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  --spacing-5xl: 96px;
  --spacing-6xl: 128px;

  /* ── Breakpoints (als Custom Properties – Info-Referenz für JS) ─────────── */

  --bp-mobile:  768px;
  --bp-tablet:  1024px;
  --bp-desktop: 1280px;
  --bp-wide:    1440px;

  /* ── Layout ─────────────────────────────────────────────────────────────── */

  --container-max:   1280px;
  --container-pad:   var(--spacing-lg);   /* Mobile Seitenabstand */
  --grid-gap:        var(--spacing-xl);

  /* ── Rahmen & Radien ────────────────────────────────────────────────────── */

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

  --border-color:       var(--color-secondary);
  --border-width:       1px;

  /* ── Schatten ────────────────────────────────────────────────────────────── */

  --shadow-sm:  0 1px  3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.15);

  /* ── Übergänge / Animationen ─────────────────────────────────────────────── */

  --transition-fast:   150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow:   500ms ease-in-out;

  /* ── Z-Index Skala ───────────────────────────────────────────────────────── */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-header:  400;
}