/* ============================================================
   tokens.css — Design System: CSS Custom Properties
   Martin Gerber Entrümpelung & Service
   ============================================================ */

:root {
  /* Brand Colors */
  --color-primary:       #1B3A5C;   /* Deep navy — trust, reliability */
  --color-primary-dark:  #122840;
  --color-primary-light: #2A5280;
  --color-accent:        #E8A020;   /* Warm amber — action, energy */
  --color-accent-dark:   #C8861A;
  --color-accent-light:  #F5B84A;

  /* Neutral Palette */
  --color-bg:            #F8F9FA;
  --color-bg-alt:        #FFFFFF;
  --color-bg-dark:       #1A1A2E;
  --color-bg-muted:      #EEF0F2;
  --color-text:          #1A1A2E;
  --color-text-muted:    #6B7280;
  --color-text-light:    #9CA3AF;
  --color-white:         #FFFFFF;
  --color-border:        #E5E7EB;
  --color-border-dark:   #D1D5DB;

  /* Status Colors */
  --color-success:       #2D7D46;
  --color-success-light: #D1FAE5;
  --color-error:         #C0392B;
  --color-error-light:   #FEE2E2;
  --color-warning:       #D97706;

  /* Typography */
  --font-primary: 'Outfit', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --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-h2:   2rem;      /* 32px — FIXED per spec */
  --font-size-h1:   2.5rem;    /* 40px — FIXED per spec */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;  /* H1 & H2 max weight per spec */
  --line-height-tight:  1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --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;
  --space-24: 6rem;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-soft: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.16);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition:      0.3s ease;
  --transition-slow: 0.5s ease;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 1.5rem;

  /* Top bar height (for offset calculations) */
  --top-bar-height: 44px;
  --header-height:  72px;
}