/* ======================
   WAB BLOG — CSS VARIABLES
   ====================== */
:root {
    --wab-primary: #12a5e9;
    --wab-accent: #6cc7f1;
    --wab-success: #00d492;
    --wab-bg: #ffffff;

    --wab-hero-title-color: #ffffff;
    --wab-hero-title-size: clamp(36px, 3.38vw + 0.5rem, 52px);
    --wab-hero-content-width: 833px;

    --wab-h2-color: #374151;
    --wab-h3-color: #374151;
    --wab-h4-color: #374151;
    --wab-h5-color: #4b5563;
    --wab-h6-color: #6b7280;
    --wab-p-color: #374151;

    --wab-h2-size: clamp(24px, 1.95vw + 0.5rem, 30px);
    --wab-h3-size: clamp(20px, 1.63vw + 0.5rem, 25px);
    --wab-h4-size: clamp(17px, 1.43vw + 0.5rem, 22px);
    --wab-h5-size: clamp(14px, 1.17vw + 0.5rem, 18px);
    --wab-h6-size: clamp(12px, 1.04vw + 0.5rem, 16px);
    --wab-p-size: clamp(16px, 1.17vw + 0.5rem, 18px);

    --wab-content-width: 640px;
    --wab-wide-width: 920px;

    --wab-gray-50: #fafaf9;
    --wab-gray-100: #f3f4f6;
    --wab-gray-200: #e5e7eb;
    --wab-gray-300: #d7d9dc;
    --wab-gray-400: #9ca3af;
    --wab-gray-500: #6b7280;
    --wab-gray-600: #4b5563;
    --wab-gray-700: #374151;
    --wab-gray-800: #1f2937;
    --wab-gray-900: #111827;

    --wab-radius: 16px;
    --wab-radius-sm: 6px;
    --wab-radius-md: 14px;
    --wab-transition: 0.3s ease;
}