/* ============================================================
   variables.css — Design Tokens & Custom Properties
   Mediation & Trennungspraxis GmbH
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@300;400;500;600&display=swap');

:root {

  /* ----------------------------------------------------------
     Farben
     ---------------------------------------------------------- */
  --color-primary:      #3D6A8A;
  --color-secondary:    #6B9DB5;
  --color-accent:       #2B5876;
  --color-accent-dark:  #1E3F55;
  --color-accent-light: #EEF4F8;

  --color-bg:           #FAFAFA;
  --color-bg-alt:       #EEF4F8;
  --color-bg-warm:      #F5F8FA;

  --color-text:         #1C3040;
  --color-text-muted:   #607080;
  --color-text-light:   #8FA4B2;

  --color-border:       #D0E4EE;
  --color-border-light: #E8F0F5;

  --color-white:        #FFFFFF;

  /* ----------------------------------------------------------
     Typografie
     ---------------------------------------------------------- */
  --font-heading: 'Lora', Georgia, serif;
  --font-body:    'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-md:   clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --font-size-lg:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-xl:   clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --font-size-2xl:  clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  --font-size-3xl:  clamp(2.5rem, 1.8rem + 3.5vw, 4.25rem);

  --line-height-tight:  1.2;
  --line-height-snug:   1.4;
  --line-height-base:   1.65;
  --line-height-loose:  1.8;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide:   0.08em;

  /* ----------------------------------------------------------
     Abstände
     ---------------------------------------------------------- */
  --space-2xs:  0.25rem;   /*  4px */
  --space-xs:   0.5rem;    /*  8px */
  --space-sm:   0.875rem;  /* 14px */
  --space-md:   1.5rem;    /* 24px */
  --space-lg:   2.5rem;    /* 40px */
  --space-xl:   4rem;      /* 64px */
  --space-2xl:  6rem;      /* 96px */
  --space-3xl:  8rem;      /* 128px */

  /* ----------------------------------------------------------
     Layout
     ---------------------------------------------------------- */
  --container-max:  1100px;
  --container-wide: 1360px;
  --gutter:         clamp(1.25rem, 4vw, 2.5rem);

  /* ----------------------------------------------------------
     Radien & Schatten
     ---------------------------------------------------------- */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  1rem;

  --shadow-sm:  0 1px 3px rgba(28, 48, 64, 0.06), 0 1px 2px rgba(28, 48, 64, 0.04);
  --shadow-md:  0 4px 16px rgba(28, 48, 64, 0.08), 0 2px 6px rgba(28, 48, 64, 0.05);
  --shadow-lg:  0 12px 40px rgba(28, 48, 64, 0.12), 0 4px 12px rgba(28, 48, 64, 0.06);

  /* ----------------------------------------------------------
     Übergänge
     ---------------------------------------------------------- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;

  /* ----------------------------------------------------------
     Navigation
     ---------------------------------------------------------- */
  --nav-height:       4.5rem;
  --nav-bg:           rgba(250, 250, 250, 0.96);
  --nav-border:       var(--color-border-light);
}