/**
 * ============================================================================
 * NETT SECTIONS - MASTER CSS VARIABLES
 * ============================================================================
 * 
 * This file contains all CSS custom properties (variables) used across
 * all section widgets. Modify these values to change the entire theme
 * without editing individual widget CSS files.
 * 
 * Categories:
 * 1. COLOR PALETTE - Primary, Secondary, Accent, Neutral colors
 * 2. TYPOGRAPHY - Font families, sizes, weights, line heights
 * 3. SPACING - Margins, paddings, gaps
 * 4. BORDERS & RADIUS - Border widths, border radius values
 * 5. SHADOWS - Box shadows, text shadows
 * 6. TRANSITIONS - Animation durations and easing functions
 * 7. BREAKPOINTS - Responsive design values
 * 8. Z-INDEX - Layer ordering
 * 
 * ============================================================================
 */

:root {
    /* =========================================================================
     * 1. COLOR PALETTE
     * =========================================================================
     */
    
    /* --- Primary Colors --- */
    --nett-primary-50: #f0f9ff;
    --nett-primary-100: #e0f2fe;
    --nett-primary-200: #bfe1fd;
    --nett-primary-300: #90caf9;
    --nett-primary-400: #64b5f6;
    --nett-primary-500: #42a5f5;
    --nett-primary-600: #39827c;
    --nett-primary-700: #1e88e5;
    --nett-primary-800: #1565c0;
    --nett-primary-900: #0d47a1;
    --nett-primary: #39827c;
    --nett-primary-light: #64b5f6;
    --nett-primary-dark: #1565c0;
    
    /* --- Secondary Colors --- */
    --nett-secondary-50: #f0fdf4;
    --nett-secondary-100: #dcfce7;
    --nett-secondary-200: #bbf7d0;
    --nett-secondary-300: #86efac;
    --nett-secondary-400: #4ade80;
    --nett-secondary-500: #22c55e;
    --nett-secondary-600: #16a34a;
    --nett-secondary-700: #15803d;
    --nett-secondary-800: #166534;
    --nett-secondary-900: #14532d;
    --nett-secondary: #86efac;
    --nett-secondary-light: #4ade80;
    --nett-secondary-dark: #166534;
    
    /* --- Accent Colors --- */
    --nett-accent-50: #fff7ed;
    --nett-accent-100: #ffedd5;
    --nett-accent-200: #fed7aa;
    --nett-accent-300: #fdba74;
    --nett-accent-400: #fb923c;
    --nett-accent-500: #f97316;
    --nett-accent-600: #ea580c;
    --nett-accent-700: #c2410c;
    --nett-accent-800: #9a3412;
    --nett-accent-900: #7c2d12;
    --nett-accent: #fdba74;
    --nett-accent-light: #fb923c;
    --nett-accent-dark: #c2410c;
    
    /* --- Success Colors --- */
    --nett-success-50: #ecfdf5;
    --nett-success-100: #d1fae5;
    --nett-success-200: #a7f3d0;
    --nett-success-300: #6ee7b7;
    --nett-success-400: #34d399;
    --nett-success-500: #10b981;
    --nett-success-600: #059669;
    --nett-success-700: #047857;
    --nett-success-800: #065f46;
    --nett-success-900: #064e3b;
    --nett-success: #10b981;
    
    /* --- Warning Colors --- */
    --nett-warning-50: #fffbeb;
    --nett-warning-100: #fef3c7;
    --nett-warning-200: #fde68a;
    --nett-warning-300: #fcd34d;
    --nett-warning-400: #fbbf24;
    --nett-warning-500: #f59e0b;
    --nett-warning-600: #d97706;
    --nett-warning-700: #b45309;
    --nett-warning-800: #92400e;
    --nett-warning-900: #78350f;
    --nett-warning: #f59e0b;
    
    /* --- Error/Danger Colors --- */
    --nett-error-50: #fef2f2;
    --nett-error-100: #fee2e2;
    --nett-error-200: #fecaca;
    --nett-error-300: #fca5a5;
    --nett-error-400: #f87171;
    --nett-error-500: #ef4444;
    --nett-error-600: #dc2626;
    --nett-error-700: #b91c1c;
    --nett-error-800: #991b1b;
    --nett-error-900: #7f1d1d;
    --nett-error: #ef4444;
    
    /* --- Neutral/Gray Colors --- */
    --nett-gray-50: #f9fafb;
    --nett-gray-100: #f3f4f6;
    --nett-gray-200: #e5e7eb;
    --nett-gray-300: #d1d5db;
    --nett-gray-400: #9ca3af;
    --nett-gray-500: #6b7280;
    --nett-gray-600: #4b5563;
    --nett-gray-700: #374151;
    --nett-gray-800: #1f2937;
    --nett-gray-900: #111827;
    --nett-gray-950: #030712;
    
    /* --- Base Colors --- */
    --nett-white: #ffffff;
    --nett-black: #000000;
    --nett-transparent: transparent;
    
    /* --- Text Colors --- */
    --nett-text-primary: #111827;
    --nett-text-secondary: #4b5563;
    --nett-text-muted: #9ca3af;
    --nett-text-light: #ffffff;
    --nett-text-dark: #030712;
    --nett-text-link: #39827c;
    --nett-text-link-hover: #1565c0;
    
    /* --- Background Colors --- */
    --nett-bg-primary: #f0f2fe;
    --nett-bg-secondary: #f9fafb;
    --nett-bg-tertiary: #f3f4f6;
    --nett-bg-dark: #111827;
    --nett-bg-darker: #030712;
    --nett-bg-overlay: rgba(0, 0, 0, 0.5);
    --nett-bg-overlay-light: rgba(255, 255, 255, 0.9);
    
    /* --- Gradient Presets --- */
    --nett-gradient-primary: linear-gradient(135deg, #39827c 0%, #86efac 100%);
    --nett-gradient-accent: linear-gradient(135deg, #fdba74 0%, #39827c 100%);
    --nett-gradient-dark: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    --nett-gradient-light: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    --nett-gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --nett-gradient-sunset: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    --nett-gradient-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    
    /* =========================================================================
     * 2. TYPOGRAPHY
     * =========================================================================
     */
    
    /* --- Font Families --- */
    --nett-font-primary: 'Poppins', sans-serif;
    --nett-font-secondary: 'Nunito', sans-serif;
    --nett-font-heading: var(--nett-font-secondary);
    --nett-font-body: var(--nett-font-primary);
    --nett-font-mono: 'Fira Code', 'Consolas', 'Monaco', monospace;
    
    /* --- Font Sizes - Desktop --- */
    --nett-text-xs: 0.75rem;      /* 12px */
    --nett-text-sm: 0.875rem;     /* 14px */
    --nett-text-base: 1rem;       /* 16px */
    --nett-text-lg: 1.125rem;     /* 18px */
    --nett-text-xl: 1.25rem;      /* 20px */
    --nett-text-2xl: 1.5rem;      /* 24px */
    --nett-text-3xl: 2rem;    /* 30px */
    --nett-text-4xl: 2.5rem;     /* 36px */
    --nett-text-5xl: 3.5rem;        /* 48px */
    --nett-text-6xl: 4.5rem;     /* 60px */
    --nett-text-7xl: 5.5rem;      /* 72px */
    --nett-text-8xl: 7rem;        /* 96px */
    
    /* --- Heading Sizes --- */
    --nett-h1-size: var(--nett-text-5xl);
    --nett-h2-size: var(--nett-text-4xl);
    --nett-h3-size: var(--nett-text-3xl);
    --nett-h4-size: var(--nett-text-2xl);
    --nett-h5-size: var(--nett-text-xl);
    --nett-h6-size: var(--nett-text-lg);
    
    /* --- Font Weights --- */
    --nett-font-thin: 100;
    --nett-font-extralight: 200;
    --nett-font-light: 300;
    --nett-font-normal: 400;
    --nett-font-medium: 500;
    --nett-font-semibold: 600;
    --nett-font-bold: 700;
    --nett-font-extrabold: 800;
    --nett-font-black: 900;
    
    /* --- Line Heights --- */
    --nett-leading-none: 1;
    --nett-leading-tight: 1.25;
    --nett-leading-snug: 1.375;
    --nett-leading-normal: 1.5;
    --nett-leading-relaxed: 1.625;
    --nett-leading-loose: 2;
    
    /* --- Letter Spacing --- */
    --nett-tracking-tighter: -0.05em;
    --nett-tracking-tight: -0.025em;
    --nett-tracking-normal: 0;
    --nett-tracking-wide: 0.025em;
    --nett-tracking-wider: 0.05em;
    --nett-tracking-widest: 0.1em;
    
    /* =========================================================================
     * 3. SPACING
     * =========================================================================
     */
    
    /* --- Base Spacing Scale --- */
    --nett-space-0: 0;
    --nett-space-1: 0.25rem;      /* 4px */
    --nett-space-2: 0.5rem;       /* 8px */
    --nett-space-3: 0.75rem;      /* 12px */
    --nett-space-4: 1rem;         /* 16px */
    --nett-space-5: 1.25rem;      /* 20px */
    --nett-space-6: 1.5rem;       /* 24px */
    --nett-space-8: 2rem;         /* 32px */
    --nett-space-10: 2.5rem;      /* 40px */
    --nett-space-12: 3rem;        /* 48px */
    --nett-space-16: 4rem;        /* 64px */
    --nett-space-20: 5rem;        /* 80px */
    --nett-space-24: 6rem;        /* 96px */
    --nett-space-32: 8rem;        /* 128px */
    
    /* --- Section Spacing --- */
    --nett-section-padding-y: var(--nett-space-20);
    --nett-section-padding-x: var(--nett-space-6);
    --nett-section-gap: var(--nett-space-12);
    
    /* --- Container Widths --- */
    --nett-container-sm: 640px;
    --nett-container-md: 768px;
    --nett-container-lg: 1024px;
    --nett-container-xl: 1280px;
    --nett-container-2xl: 1536px;
    --nett-container-max: var(--nett-container-xl);
    
    /* --- Gap Sizes --- */
    --nett-gap-xs: var(--nett-space-2);
    --nett-gap-sm: var(--nett-space-4);
    --nett-gap-md: var(--nett-space-6);
    --nett-gap-lg: var(--nett-space-8);
    --nett-gap-xl: var(--nett-space-12);
    
    /* =========================================================================
     * 4. BORDERS & RADIUS
     * =========================================================================
     */
    
    /* --- Border Widths --- */
    --nett-border-0: 0;
    --nett-border-1: 1px;
    --nett-border-2: 2px;
    --nett-border-4: 4px;
    --nett-border-8: 8px;
    --nett-border: var(--nett-border-1);
    
    /* --- Border Colors --- */
    --nett-border-color: var(--nett-gray-200);
    --nett-border-color-dark: var(--nett-gray-700);
    --nett-border-color-light: var(--nett-gray-100);
    
    /* --- Border Radius --- */
    --nett-radius-none: 0;
    --nett-radius-sm: 0.125rem;   /* 2px */
    --nett-radius-md: 0.375rem;   /* 6px */
    --nett-radius-lg: 0.5rem;     /* 8px */
    --nett-radius-xl: 0.75rem;    /* 12px */
    --nett-radius-2xl: 1rem;      /* 16px */
    --nett-radius-3xl: 1.5rem;    /* 24px */
    --nett-radius-full: 9999px;
    --nett-radius: var(--nett-radius-xl);
    
    /* =========================================================================
     * 5. SHADOWS
     * =========================================================================
     */
    
    /* --- Box Shadows --- */
    --nett-shadow-none: none;
    --nett-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --nett-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --nett-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --nett-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --nett-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --nett-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --nett-shadow: var(--nett-shadow-sm);
    
    /* --- Colored Shadows --- */
    --nett-shadow-primary: 0 10px 40px -10px rgba(57, 130, 124, 0.4);
    --nett-shadow-secondary: 0 10px 40px -10px rgba(134, 239, 172, 0.4);
    --nett-shadow-accent: 0 10px 40px -10px rgba(253, 186, 116, 0.4);
    
    /* =========================================================================
     * 6. TRANSITIONS
     * =========================================================================
     */
    
    /* --- Durations --- */
    --nett-duration-75: 75ms;
    --nett-duration-100: 100ms;
    --nett-duration-150: 150ms;
    --nett-duration-200: 200ms;
    --nett-duration-300: 300ms;
    --nett-duration-500: 500ms;
    --nett-duration-700: 700ms;
    --nett-duration-1000: 1000ms;
    --nett-duration: var(--nett-duration-300);
    
    /* --- Timing Functions --- */
    --nett-ease-linear: linear;
    --nett-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --nett-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --nett-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --nett-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --nett-ease: var(--nett-ease-in-out);
    
    /* --- Transition Presets --- */
    --nett-transition-all: all var(--nett-duration) var(--nett-ease);
    --nett-transition-colors: color var(--nett-duration) var(--nett-ease), background-color var(--nett-duration) var(--nett-ease), border-color var(--nett-duration) var(--nett-ease);
    --nett-transition-opacity: opacity var(--nett-duration) var(--nett-ease);
    --nett-transition-transform: transform var(--nett-duration) var(--nett-ease);
    --nett-transition-shadow: box-shadow var(--nett-duration) var(--nett-ease);
    
    /* =========================================================================
     * 7. Z-INDEX
     * =========================================================================
     */
    
    --nett-z-0: 0;
    --nett-z-10: 10;
    --nett-z-20: 20;
    --nett-z-30: 30;
    --nett-z-40: 40;
    --nett-z-50: 50;
    --nett-z-dropdown: 100;
    --nett-z-sticky: 500;
    --nett-z-fixed: 1000;
    --nett-z-modal-backdrop: 5000;
    --nett-z-modal: 5100;
    --nett-z-popover: 6000;
    --nett-z-tooltip: 7000;
    --nett-z-max: 9999;
    
    /* =========================================================================
     * 8. COMPONENT-SPECIFIC VARIABLES
     * =========================================================================
     */
    
    /* --- Navigation --- */
    --nett-nav-height: 80px;
    --nett-nav-height-scrolled: 64px;
    --nett-nav-bg: var(--nett-white);
    --nett-nav-bg-scrolled: rgba(255, 255, 255, 0.95);
    --nett-nav-text: var(--nett-gray-700);
    --nett-nav-text-hover: var(--nett-primary);
    --nett-nav-link-size: var(--nett-text-sm);
    --nett-nav-logo-size: var(--nett-text-xl);
    
    /* --- Hero Section --- */
    --nett-hero-min-height: 600px;
    --nett-hero-title-size: var(--nett-text-6xl);
    --nett-hero-subtitle-size: var(--nett-text-lg);
    --nett-hero-desc-size: var(--nett-text-xl);
    --nett-hero-overlay-color: rgba(0, 0, 0, 0.5);
    
    /* --- Cards --- */
    --nett-card-bg: var(--nett-white);
    --nett-card-border: var(--nett-border-color);
    --nett-card-radius: var(--nett-radius-xl);
    --nett-card-shadow: var(--nett-shadow-md);
    --nett-card-shadow-hover: var(--nett-shadow-xl);
    --nett-card-padding: var(--nett-space-6);
    
    /* --- Buttons --- */
    --nett-btn-padding-x: var(--nett-space-6);
    --nett-btn-padding-y: var(--nett-space-3);
    --nett-btn-font-size: var(--nett-text-sm);
    --nett-btn-font-weight: var(--nett-font-semibold);
    --nett-btn-radius: var(--nett-radius-lg);
    --nett-btn-primary-bg: var(--nett-primary);
    --nett-btn-primary-text: var(--nett-white);
    --nett-btn-primary-hover-bg: var(--nett-primary-dark);
    --nett-btn-secondary-bg: var(--nett-transparent);
    --nett-btn-secondary-text: var(--nett-primary);
    --nett-btn-secondary-border: var(--nett-primary);
    
    /* --- Forms --- */
    --nett-input-bg: var(--nett-white);
    --nett-input-border: var(--nett-border-color);
    --nett-input-border-focus: var(--nett-primary);
    --nett-input-radius: var(--nett-radius-lg);
    --nett-input-padding: var(--nett-space-3) var(--nett-space-4);
    --nett-input-font-size: var(--nett-text-base);
    
    /* --- Footer --- */
    --nett-footer-bg: var(--nett-gray-900);
    --nett-footer-text: var(--nett-gray-300);
    --nett-footer-heading: var(--nett-white);
    --nett-footer-link: var(--nett-gray-400);
    --nett-footer-link-hover: var(--nett-white);
    --nett-footer-border: var(--nett-gray-800);
    
    /* --- Badges --- */
    --nett-badge-padding: var(--nett-space-1) var(--nett-space-3);
    --nett-badge-radius: var(--nett-radius-full);
    --nett-badge-font-size: var(--nett-text-xs);
    --nett-badge-font-weight: var(--nett-font-semibold);
    
    /* --- Icons --- */
    --nett-icon-size-sm: 16px;
    --nett-icon-size-md: 24px;
    --nett-icon-size-lg: 32px;
    --nett-icon-size-xl: 48px;
    
    /* --- Testimonials --- */
    --nett-testimonial-card-bg: var(--nett-white);
    --nett-testimonial-quote-color: #e0f2fe;
    --nett-testimonial-star-color: #fbbf24;
    --nett-testimonial-avatar-size: 56px;
    
    /* --- Tags/Ticker --- */
    --nett-ticker-speed: 30s;
    --nett-tag-bg: var(--nett-gray-100);
    --nett-tag-text: var(--nett-gray-700);
    --nett-tag-hover-bg: var(--nett-primary);
    --nett-tag-hover-text: var(--nett-white);
}

/* =========================================================================
 * RESPONSIVE OVERRIDES
 * =========================================================================
 */

/* --- Tablet --- */
@media (max-width: 1024px) {
    :root {
        --nett-h1-size: var(--nett-text-4xl);
        --nett-h2-size: var(--nett-text-3xl);
        --nett-h3-size: var(--nett-text-2xl);
        --nett-hero-title-size: var(--nett-text-5xl);
        --nett-section-padding-y: var(--nett-space-16);
    }
}

/* --- Mobile --- */
@media (max-width: 768px) {
    :root {
        --nett-h1-size: var(--nett-text-3xl);
        --nett-h2-size: var(--nett-text-2xl);
        --nett-h3-size: var(--nett-text-xl);
        --nett-hero-title-size: var(--nett-text-4xl);
        --nett-hero-min-height: 500px;
        --nett-section-padding-y: var(--nett-space-12);
        --nett-section-padding-x: var(--nett-space-4);
        --nett-nav-height: 64px;
    }
}

/* --- Small Mobile --- */
@media (max-width: 480px) {
    :root {
        --nett-h1-size: var(--nett-text-2xl);
        --nett-h2-size: var(--nett-text-xl);
        --nett-hero-title-size: var(--nett-text-3xl);
        --nett-hero-subtitle-size: var(--nett-text-base);
        --nett-hero-desc-size: var(--nett-text-base);
        --nett-card-padding: var(--nett-space-4);
    }
}