/* =====================================================================
   CS Technologies — Design Tokens
   Kleuren worden waar mogelijk overschreven door de Customizer
   (zie inc/customizer-css.php). Wijzig hier alleen de standaardwaarden.
===================================================================== */

:root {
  /* ===== BRAND COLORS ===== */
  --primary: #0066CC;
  --primary-dark: #003B7A;
  --primary-light: #EAF4FF;

  --secondary: #FF7A00;
  --secondary-dark: #E86500;
  --secondary-light: #FFF3E6;

  --navy: #002B5C;
  --navy-dark: #001B3A;

  --white: #FFFFFF;
  --black: #111827;

  /* ===== TEXT COLORS ===== */
  --text-primary: #102A43;
  --text-secondary: #486581;
  --text-light: #627D98;
  --text-white: #FFFFFF;

  /* ===== BACKGROUND COLORS ===== */
  --bg-white: #FFFFFF;
  --bg-light: #F7FAFC;
  --bg-blue: #F0F7FF;
  --bg-dark: #002B5C;

  /* ===== BORDER ===== */
  --border-light: #E2E8F0;
  --border-blue: #D6E8FA;

  /* ===== SUCCESS / TRUST ===== */
  --success: #16A34A;
  --success-light: #EAF8EF;

  /* ===== TYPOGRAPHY ===== */
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;

  --fs-h6: 22px;
  --fs-h5: 26px;
  --fs-h4: 32px;
  --fs-h3: 40px;
  --fs-h2: 48px;
  --fs-h1: 58px;

  /* ===== FONT WEIGHT ===== */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ===== LINE HEIGHT ===== */
  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ===== SPACING ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 50px;
  --space-12: 100px;

  /* ===== CONTAINER ===== */
  --container-width: 1200px;
  --container-padding: 20px;

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ===== SHADOW ===== */
  --shadow-sm: 0 2px 8px rgba(0, 43, 92, 0.06);
  --shadow-md: 0 8px 25px rgba(0, 43, 92, 0.10);
  --shadow-lg: 0 15px 40px rgba(0, 43, 92, 0.14);

  /* ===== TRANSITION ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ===== Z-INDEX ===== */
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-modal: 2000;

  /* ===== HEADER ===== */
  --header-height: 80px;
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 38px;
    --fs-h2: 32px;
    --fs-h3: 28px;
    --fs-h4: 24px;

    --space-10: 48px;
    --space-11: 60px;
    --space-12: 70px;

    --header-height: 68px;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-h3: 24px;
  }
}