/* =====================================================
   ZENING WEBSITE - THEME CONFIGURATION
   =====================================================

   This is your CENTRAL theme configuration file.
   Change colors, spacing, fonts, and more from here.
   All changes will automatically apply to the entire website.

   ===================================================== */

:root {
    /* ==========================================
       PRIMARY COLORS - Main brand colors
       ========================================== */

    /* ACTIVE THEME: Professional Construction Blue & Orange */
    /* Classic construction industry colors - reliable and recognizable */
    --primary-color: #1a3a52;    /* Deep professional blue - trust & stability */
    --primary-dark: #0f2638;     /* Darker blue for depth */
    --primary-light: #2c5f7d;    /* Lighter blue for gradients */

    /* Accent color - Construction safety orange */
    --accent-color: #ff8c42;     /* Warm construction orange - safety & action */
    --accent-dark: #e67622;      /* Deeper orange */
    --accent-light: #ffa85c;     /* Lighter orange for highlights */


    /* ==========================================
       TEXT COLORS
       ========================================== */

    --text-dark: #1a1a1a;        /* Main text color */
    --text-light: #f5f5f5;       /* Light text (on dark backgrounds) */
    --text-gray: #666;           /* Secondary text color */


    /* ==========================================
       BACKGROUND COLORS
       ========================================== */

    --bg-light: #f8f9fa;         /* Light section backgrounds */
    --bg-white: #ffffff;         /* White backgrounds */
    --bg-dark: #1a1a1a;          /* Dark backgrounds */


    /* ==========================================
       TYPOGRAPHY - Fonts and text sizes
       ========================================== */

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Font sizes for different elements */
    --font-size-hero: 3.5rem;    /* Hero title size */
    --font-size-h1: 2.5rem;      /* Section titles */
    --font-size-h2: 2rem;        /* Sub-section titles */
    --font-size-h3: 1.5rem;      /* Card titles */
    --font-size-body: 1rem;      /* Body text */
    --font-size-small: 0.875rem; /* Small text */


    /* ==========================================
       SPACING - Padding and margins
       ========================================== */

    --spacing-xs: 0.5rem;        /* 8px */
    --spacing-sm: 1rem;          /* 16px */
    --spacing-md: 2rem;          /* 32px */
    --spacing-lg: 5rem;          /* 80px - INCREASED for modern look */
    --spacing-xl: 7rem;          /* 112px - INCREASED for modern look */


    /* ==========================================
       LAYOUT
       ========================================== */

    --container-width: 1200px;   /* Max width of content */
    --header-height: 80px;       /* Navigation bar height */
    --hero-min-height: 600px;    /* Minimum hero section height */


    /* ==========================================
       BORDERS & RADIUS
       ========================================== */

    --border-radius-sm: 4px;     /* Small border radius */
    --border-radius-md: 8px;     /* Medium border radius */
    --border-radius-lg: 12px;    /* Large border radius */


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

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);


    /* ==========================================
       TRANSITIONS & ANIMATIONS
       ========================================== */

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;


    /* ==========================================
       BUTTONS
       ========================================== */

    --button-padding: 1rem 2.5rem;
    --button-font-size: 1rem;
    --button-border-radius: 4px;


    /* ==========================================
       SERVICE CARDS (Blue cards in Services section)
       ========================================== */

    --service-card-bg: var(--primary-color);
    --service-card-text: var(--text-light);
    --service-card-icon-color: var(--accent-color);
    --service-card-title-color: var(--accent-light);
    --service-card-padding: var(--spacing-lg);
    --service-card-radius: 12px;


    /* ==========================================
       HERO SECTION - Complete Customization
       ========================================== */

    /* --- Background Colors & Gradient --- */
    --hero-bg-start: var(--primary-dark);
    --hero-bg-middle: var(--primary-color);
    --hero-bg-end: var(--primary-light);
    --hero-gradient-angle: 135deg;              /* Gradient direction: 0deg=top, 90deg=right, 135deg=diagonal, 180deg=bottom */
    --hero-bg-overlay-opacity: 0;               /* Dark overlay on background (0=none, 0.5=medium, 1=full) */

    /* --- Blueprint Pattern (professional technical drawing) --- */
    --hero-show-grid: block;                    /* block=show pattern, none=hide pattern */
    --hero-grid-color: rgba(255,255,255,0.08);  /* Pattern line color and opacity */
    --hero-grid-size: 80px;                     /* Size of pattern grid */

    /* --- Layout & Spacing --- */
    --hero-height: 100vh;                       /* Hero height: 100vh=full screen, 80vh=80%, 600px=fixed */
    --hero-min-height: 600px;                   /* Minimum height on small screens */
    --hero-padding-top: 0;                      /* Extra padding above content */
    --hero-padding-bottom: 0;                   /* Extra padding below content */
    --hero-content-max-width: 800px;            /* Max width of hero text content */

    /* --- Text Styling --- */
    /* ACTIVE HERO STYLE: Left Aligned - Modern */
    --hero-text-color: var(--text-light);
    --hero-text-align: left;                    /* center, left, or right */
    --hero-title-size: 4.5rem;                  /* Main title size */
    --hero-title-weight: 900;                   /* Title font weight: 400=normal, 600=semibold, 700=bold */
    --hero-title-letter-spacing: -2px;          /* Space between title letters */
    --hero-title-line-height: 1.2;              /* Line height for multi-line titles */
    --hero-text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

    --hero-subtitle-size: 1.5rem;               /* Subtitle/description size */
    --hero-subtitle-opacity: 0.95;              /* Subtitle transparency */
    --hero-subtitle-weight: 400;                /* Subtitle font weight */

    /* --- Button Styling --- */
    --hero-button-bg: var(--accent-color);
    --hero-button-text: var(--text-light);
    --hero-button-padding: 1rem 2.5rem;
    --hero-button-radius: 8px;
    --hero-button-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* --- Scroll Effects (Advanced) --- */
    --hero-parallax-speed: 0.2;                 /* Parallax effect speed: 0=none, 0.2=subtle, 0.5=strong */
    --hero-fade-start: 500px;                   /* When content starts fading (scroll position in pixels) */
    --hero-fade-end: 1400px;                    /* When content fully faded */
    --hero-bg-fade-start: 700px;                /* When background starts fading */
    --hero-bg-fade-end: 1600px;                 /* When background fully faded */


    /* ==========================================
       CONTACT SECTION
       ========================================== */

    --contact-bg-start: var(--primary-dark);
    --contact-bg-end: var(--primary-color);
    --contact-text-color: var(--text-light);
    --contact-icon-color: var(--accent-color);


    /* ==========================================
       FOOTER
       ========================================== */

    --footer-bg: var(--primary-dark);
    --footer-text: var(--text-light);
    --footer-title-color: var(--accent-light);
}


/* =====================================================
   ALTERNATIVE THEMES
   =====================================================

   Uncomment one of the themes below to change
   the entire website appearance instantly!

   Instructions:
   1. Find the theme you like below
   2. Remove the /* and */ around it
   3. Save the file and refresh your browser

   ===================================================== */


/* THEME 1: Modern Blue & Orange (Default - Currently Active)
   ========================================================= */
/* This is the current theme - already active above */


/* THEME 2: Professional Dark Blue & Gold
   =========================================================
:root {
    --primary-color: #1e3a5f;
    --primary-dark: #0d1b2a;
    --primary-light: #2a5a8f;

    --accent-color: #d4af37;
    --accent-dark: #b8941f;
    --accent-light: #f4d03f;
}
*/


/* THEME 3: Modern Green & Blue
   =========================================================
:root {
    --primary-color: #0f4c3a;
    --primary-dark: #083426;
    --primary-light: #1a7256;

    --accent-color: #20c997;
    --accent-dark: #17a281;
    --accent-light: #4fdfb3;
}
*/


/* THEME 4: Elegant Purple & Pink
   =========================================================
:root {
    --primary-color: #5e2ca5;
    --primary-dark: #3d1a6b;
    --primary-light: #7c3ec0;

    --accent-color: #e74c8c;
    --accent-dark: #c73a72;
    --accent-light: #ff6ba9;
}
*/


/* THEME 5: Corporate Gray & Red
   =========================================================
:root {
    --primary-color: #2c3e50;
    --primary-dark: #1a252f;
    --primary-light: #34495e;

    --accent-color: #e74c3c;
    --accent-dark: #c0392b;
    --accent-light: #ff6b5b;
}
*/


/* THEME 6: Fresh Teal & Coral
   ========================================================= */
:root {
    --primary-color: #006d77;
    --primary-dark: #004d55;
    --primary-light: #0a9396;

    --accent-color: #ff6f61;
    --accent-dark: #e35a4d;
    --accent-light: #ff8f84;

    /* Additional styling tweaks for modern look */
    --spacing-lg: 5rem;
    --spacing-xl: 7rem;
    --button-border-radius: 8px;
    --service-card-radius: 12px;
}


/* THEME 7: Bold Black & Yellow
   =========================================================
:root {
    --primary-color: #1a1a1a;
    --primary-dark: #000000;
    --primary-light: #333333;

    --accent-color: #ffd60a;
    --accent-dark: #e6c200;
    --accent-light: #ffe552;
}
*/


/* THEME 8: Navy & Turquoise
   =========================================================
:root {
    --primary-color: #003049;
    --primary-dark: #001d30;
    --primary-light: #004568;

    --accent-color: #06d6a0;
    --accent-dark: #05b786;
    --accent-light: #42f7c7;
}
*/


/* =====================================================
   CUSTOM THEME CREATOR
   =====================================================

   Want to create your own theme?
   Copy this template and customize:

:root {
    --primary-color: #YOUR_COLOR;
    --primary-dark: #YOUR_DARKER_VERSION;
    --primary-light: #YOUR_LIGHTER_VERSION;

    --accent-color: #YOUR_ACCENT_COLOR;
    --accent-dark: #YOUR_DARKER_ACCENT;
    --accent-light: #YOUR_LIGHTER_ACCENT;
}

   Tips:
   - Use a color picker tool to find hex codes
   - Primary colors should be darker/professional
   - Accent colors should be bright and eye-catching
   - Test on both light and dark backgrounds

   ===================================================== */


/* =====================================================
   HERO SECTION STYLE PRESETS
   =====================================================

   Different professional looks for your hero section.
   Uncomment one to instantly change the hero appearance!

   ===================================================== */


/* HERO STYLE 1: Minimal & Clean (Current Default)
   ========================================================= */
/* Already active in main config above */


/* HERO STYLE 2: Bold & Centered - No Grid
   =========================================================
:root {
    --hero-show-grid: none;
    --hero-title-size: 4rem;
    --hero-title-weight: 800;
    --hero-title-letter-spacing: -1px;
    --hero-button-radius: 50px;
    --hero-gradient-angle: 180deg;
}
*/


/* HERO STYLE 3: Left Aligned - Modern
   ========================================================= */
:root {
    --hero-text-align: left;
    --hero-title-size: 4.5rem;
    --hero-title-weight: 900;
    --hero-title-letter-spacing: -2px;
    --hero-subtitle-size: 1.5rem;
    --hero-show-grid: none;
    --hero-button-radius: 8px;
    --hero-content-max-width: 800px;
}


/* HERO STYLE 4: Compact & Professional
   =========================================================
:root {
    --hero-height: 70vh;
    --hero-min-height: 500px;
    --hero-title-size: 3rem;
    --hero-title-weight: 600;
    --hero-subtitle-size: 1.1rem;
    --hero-show-grid: none;
    --hero-gradient-angle: 90deg;
}
*/


/* HERO STYLE 5: Dramatic Dark Overlay
   =========================================================
:root {
    --hero-bg-overlay-opacity: 0.4;
    --hero-title-size: 4rem;
    --hero-title-weight: 700;
    --hero-title-letter-spacing: 1px;
    --hero-text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    --hero-show-grid: none;
}
*/


/* HERO STYLE 6: Tall & Spacious
   =========================================================
:root {
    --hero-height: 100vh;
    --hero-padding-top: 4rem;
    --hero-padding-bottom: 4rem;
    --hero-title-size: 5rem;
    --hero-title-weight: 300;
    --hero-title-letter-spacing: 2px;
    --hero-subtitle-size: 1.5rem;
    --hero-show-grid: block;
}
*/


/* HERO STYLE 7: Fast Fade - Quick Reveal
   =========================================================
:root {
    --hero-fade-start: 200px;
    --hero-fade-end: 600px;
    --hero-bg-fade-start: 300px;
    --hero-bg-fade-end: 800px;
    --hero-parallax-speed: 0.3;
}
*/


/* HERO STYLE 8: Slow Fade - Long Scroll (CURRENT)
   =========================================================
   This is currently active - ultra long fade effect
*/


/* HERO STYLE 9: No Parallax - Static Background
   =========================================================
:root {
    --hero-parallax-speed: 0;
    --hero-fade-start: 300px;
    --hero-fade-end: 800px;
    --hero-bg-fade-start: 500px;
    --hero-bg-fade-end: 1000px;
}
*/


/* HERO STYLE 10: Radial Gradient - Center Focus
   =========================================================
   Note: Requires CSS update for radial gradient support
:root {
    --hero-title-size: 4rem;
    --hero-show-grid: none;
    --hero-gradient-angle: circle;
}
*/