/*
 * CSS Custom Properties (Design Tokens)
 * Florelie Website - Design System
 */

:root {
  /* ========================================
     COLORS - Natural Sage Palette
     ======================================== */

  /* Sage Green - Primary Brand Colors */
  --color-sage-dark: #9BA496;       /* Hauptfarbe - Salbei */
  --color-sage-medium: #B3BFB3;     /* Heller - Hover States */
  --color-sage-light: #CED6CE;      /* Borders, subtle accents */
  --color-sage-pale: #E8EBE8;       /* Section backgrounds */

  /* Sage Secondary - Toplines & Accents */
  --color-sage-secondary: #8B9C8B;  /* Abgetönter Salbei für Toplines */
  --color-sage-secondary-light: #A8B5A8;
  --color-sage-secondary-pale: #D9DFD9;

  /* Grays - Text & Backgrounds */
  --color-gray-dark: #4a4449;
  --color-gray-medium: #6d6770;
  --color-gray-light: #b8b4b9;
  --color-gray-pale: #e9e7e9;
  --color-gray-whisper: #f7f6f7;

  /* Utility Colors */
  --color-white: #ffffff;
  --color-black: #2a262b;
  --color-error: #c47c85;
  --color-success: #8ca88a;

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-headline: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Lora', Georgia, 'Times New Roman', serif;

  /* Font Weights - Montserrat (Headlines) */
  --weight-headline-regular: 400;
  --weight-headline-medium: 500;
  --weight-headline-semibold: 600;
  --weight-headline-bold: 700;

  /* Font Weights - Lato (Body) */
  --weight-body-regular: 400;
  --weight-body-bold: 700;

  /* Font Weights - Lora (Accent) */
  --weight-accent-regular: 400;
  --weight-accent-medium: 500;
  --weight-accent-semibold: 600;

  /* Type Scale - Mobile First (320px+) */
  --text-xs: 0.75rem;      /* 12px - captions, legal */
  --text-sm: 0.875rem;     /* 14px - small text */
  --text-base: 1rem;       /* 16px - body text */
  --text-lg: 1.125rem;     /* 18px - large body */
  --text-xl: 1.25rem;      /* 20px - subheadings */
  --text-2xl: 1.5rem;      /* 24px - h3 */
  --text-3xl: 1.875rem;    /* 30px - h2 */
  --text-4xl: 2.25rem;     /* 36px - h1 */
  --text-5xl: 3rem;        /* 48px - hero */

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ========================================
     SPACING SCALE (8px base grid)
     ======================================== */

  --space-xs: 0.5rem;      /* 8px */
  --space-sm: 0.75rem;     /* 12px */
  --space-md: 1rem;        /* 16px */
  --space-lg: 1.5rem;      /* 24px */
  --space-xl: 2rem;        /* 32px */
  --space-2xl: 2.5rem;     /* 40px */
  --space-3xl: 3rem;       /* 48px */
  --space-4xl: 4rem;       /* 64px */
  --space-5xl: 5rem;       /* 80px */
  --space-6xl: 6rem;       /* 96px */

  /* ========================================
     CONTAINER WIDTHS
     ======================================== */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* ========================================
     BORDER RADIUS
     ======================================== */

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

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-sm: 0 1px 2px 0 rgba(155, 164, 150, 0.05);
  --shadow-md: 0 4px 16px 0 rgba(155, 164, 150, 0.1);
  --shadow-lg: 0 10px 24px 0 rgba(155, 164, 150, 0.15);
  --shadow-xl: 0 20px 40px 0 rgba(155, 164, 150, 0.2);

  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ========================================
   RESPONSIVE TYPE SCALE (Desktop)
   ======================================== */

@media (min-width: 1024px) {
  :root {
    --text-4xl: 2.75rem;   /* 44px */
    --text-5xl: 4rem;      /* 64px */
  }
}