/* 
 * Color Variables for Baltic Trends Interiors and Furniture
 * All colors and backgrounds organized by section with descriptive names
 */

/* ============================================
   ROOT / GLOBAL COLORS
   ============================================ */
:root {
    /* Primary brand colors */
    --root-primary-color: #B8860B;
    /* Dark goldenrod - main brand color */
    --root-secondary-color: #D4B896;
    /* Light tan - secondary brand color */
    --root-accent-color: #CD853F;
    /* Peru - accent color */
    --root-dark-color: #3A3A3A;
    /* Dark gray - text color */
    --root-light-color: #F5F5F5;
    /* Light gray - light background */

    /* Global backgrounds */
    --root-html-background-image: url('BrightKitchen.png');
    /* Main background image */
    --root-body-background-color: transparent;
    /* Body background */
    --root-transparent: transparent;
    /* Transparent background */
}

/* ============================================
   NAVIGATION / TOP BAR COLORS
   ============================================ */
:root {
    /* Top bar */
    --nav-top-bar-background-color: transparent;
    /* Top navigation bar background */

    /* Sign in button */
    --nav-sign-in-button-color: black;
    /* Sign in button text color */
    --nav-sign-in-button-background: transparent;
    /* Sign in button background */
    --nav-sign-in-button-border-color: var(--root-secondary-color);
    /* Sign in button border */
    --nav-sign-in-button-hover-background: var(--root-primary-color);
    /* Sign in button hover background */
    --nav-sign-in-button-hover-color: white;
    /* Sign in button hover text */
    --nav-sign-in-button-hover-border-color: var(--root-primary-color);
    /* Sign in button hover border */

    /* Menu text (company name) */
    --nav-menu-text-color: var(--root-primary-color);
    /* Company name text color */

    /* Menu links */
    --nav-menu-link-color: black;
    /* Navigation menu link text */
    --nav-menu-link-background: transparent;
    /* Navigation menu link background */
    --nav-menu-link-hover-background: #2a2a2a;
    /* Navigation menu link hover background */
    --nav-menu-link-hover-color: white;
    /* Navigation menu link hover text */
    --nav-menu-link-active-background: #2a2a2a;
    /* Navigation menu link active background */
    --nav-menu-link-active-color: white;
    /* Navigation menu link active text */

    /* Language selector */
    --nav-language-selector-background: transparent;
    /* Language selector background */
    --nav-language-selector-border-color: var(--root-secondary-color);
    /* Language selector border */
    --nav-language-selector-color: black;
    /* Language selector text color */
    --nav-language-selector-hover-border-color: var(--root-primary-color);
    /* Language selector hover border */
    --nav-language-selector-focus-border-color: var(--root-primary-color);
    /* Language selector focus border */
    --nav-language-selector-focus-box-shadow: rgba(139, 115, 85, 0.3);
    /* Language selector focus shadow */

    /* Menu dropdowns */
    --nav-menu-dropdown-background: transparent;
    /* Menu dropdown background */
}

/* ============================================
   HERO SECTION COLORS
   ============================================ */
:root {
    /* Hero section */
    --hero-section-background: transparent;
    /* Hero section background */
    --hero-section-color: black;
    /* Hero section text color */

    /* Hero title */
    --hero-title-text-shadow: rgba(0, 0, 0, 0.2);
    /* Hero title text shadow */

    /* Hero button */
    --hero-button-background: var(--root-accent-color);
    /* Hero button background */
    --hero-button-color: white;
    /* Hero button text color */
    --hero-button-hover-background: #B8860B;
    /* Hero button hover background */
    --hero-button-hover-box-shadow: rgba(0, 0, 0, 0.2);
    /* Hero button hover shadow */
}

/* ============================================
   RUSTIC SQUARES COLORS
   ============================================ */
:root {
    /* Rustic square decorative elements */
    --rustic-square-box-shadow: rgba(0, 0, 0, 0.2);
    /* Rustic square shadow */

    /* Rustic square color palette (used in JavaScript) */
    --rustic-square-color-brown: #8B6F47;
    /* Brown */
    --rustic-square-color-tan: #A67C52;
    /* Tan */
    --rustic-square-color-dark-brown-1: #6B4423;
    /* Dark brown */
    --rustic-square-color-saddle-brown: #8B4513;
    /* Saddle brown */
    --rustic-square-color-dark-brown-2: #654321;
    /* Dark brown */
    --rustic-square-color-taupe: #7D6B4F;
    /* Taupe */
    --rustic-square-color-dark-taupe: #5C4A3A;
    /* Dark taupe */
    --rustic-square-color-dark-goldenrod: #B8860B;
    /* Dark goldenrod */
    --rustic-square-color-peru: #CD853F;
    /* Peru */
    --rustic-square-color-sienna: #A0522D;
    /* Sienna */
}

/* ============================================
   SERVICES SECTION COLORS
   ============================================ */
:root {
    /* Services section */
    --services-section-background: #573b3bb9;
    /* Services section background (with transparency) */
    --services-section-cell-background: #573b3bb9;
    /* Services section cell background */

    /* Services headings */
    --services-heading-color: var(--root-primary-color);
    /* Services section heading color */

    /* Services lead text */
    --services-lead-color: white;
    /* Services section lead text color */

    /* Services cards */
    --services-card-background: #544141b9;
    /* Services card background (with transparency) */
    --services-card-color: white;
    /* Services card text color */
    --services-card-box-shadow: rgba(0, 0, 0, 0.1);
    /* Services card shadow */
    --services-card-hover-box-shadow: rgba(0, 0, 0, 0.15);
    /* Services card hover shadow */

    /* Services card headings */
    --services-card-heading-color: var(--root-primary-color);
    /* Services card heading color */
}

/* ============================================
   GALLERY SECTION COLORS
   ============================================ */
:root {
    /* Gallery section */
    --gallery-section-background: transparent;
    /* Gallery section background */

    /* Gallery headings */
    --gallery-heading-color: var(--root-primary-color);
    /* Gallery section heading color */

    /* Gallery lead text */
    --gallery-lead-color: var(--root-dark-color);
    /* Gallery section lead text color */

    /* Gallery slider container */
    --gallery-slider-container-background: rgba(255, 255, 255, 0.95);
    /* Gallery slider container background */
    --gallery-slider-container-box-shadow: rgba(0, 0, 0, 0.2);
    /* Gallery slider container shadow */

    /* Gallery image */
    --gallery-image-box-shadow: rgba(0, 0, 0, 0.3);
    /* Gallery image shadow */

    /* Gallery caption */
    --gallery-caption-background: rgba(255, 255, 255, 0.9);
    /* Gallery caption background */
    --gallery-caption-heading-color: var(--root-primary-color);
    /* Gallery caption heading color */
    --gallery-caption-text-color: var(--root-dark-color);
    /* Gallery caption text color */

    /* Gallery navigation buttons */
    --gallery-nav-button-background: var(--root-primary-color);
    /* Gallery nav button background */
    --gallery-nav-button-color: white;
    /* Gallery nav button text color */
    --gallery-nav-button-box-shadow: rgba(0, 0, 0, 0.3);
    /* Gallery nav button shadow */
    --gallery-nav-button-hover-background: var(--root-accent-color);
    /* Gallery nav button hover background */

    /* Gallery indicators */
    --gallery-indicator-background: var(--root-secondary-color);
    /* Gallery indicator background */
    --gallery-indicator-active-background: var(--root-primary-color);
    /* Gallery indicator active background */
}

/* ============================================
   ABOUT SECTION COLORS
   ============================================ */
:root {
    /* About section */
    --about-section-background: transparent;
    /* About section background */
    --about-section-cell-background: transparent;
    /* About section cell background */

    /* About section callout/card */
    --about-callout-background: rgba(79, 92, 90, 0.85);
    /* About section callout background */
    --about-callout-border-color: var(--root-accent-color);
    /* About section callout border color */

    /* About headings */
    --about-heading-color: var(--root-primary-color);
    /* About section heading color */

    /* About text */
    --about-text-color: white;
    /* About section text color */

    /* About callout headings */
    --about-callout-heading-color: var(--root-primary-color);
    /* About callout heading color */
}

/* ============================================
   TEAM SECTION COLORS
   ============================================ */
:root {
    /* Team section */
    --team-section-background: transparent;
    /* Team section background */

    /* Team section cell gradient */
    --team-section-cell-gradient: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    /* Team section cell gradient */

    /* Team headings */
    --team-heading-color: var(--root-primary-color);
    /* Team section heading color */

    /* Team lead text */
    --team-lead-color: var(--root-dark-color);
    /* Team section lead text color */

    /* Team cards */
    --team-card-background: transparent;
    /* Team card background */
    --team-card-box-shadow: rgba(0, 0, 0, 0.1);
    /* Team card shadow */
    --team-card-hover-box-shadow: rgba(0, 0, 0, 0.15);
    /* Team card hover shadow */

    /* Team image placeholder */
    --team-image-placeholder-gradient: linear-gradient(135deg, var(--root-primary-color) 0%, var(--root-accent-color) 100%);
    /* Team image placeholder gradient */
    --team-image-placeholder-color: white;
    /* Team image placeholder text color */
    --team-image-placeholder-box-shadow: rgba(0, 0, 0, 0.2);
    /* Team image placeholder shadow */
    --team-image-placeholder-shine-gradient: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    /* Team image placeholder shine effect */

    /* Team name */
    --team-name-color: var(--root-primary-color);
    /* Team member name color */

    /* Team role */
    --team-role-color: var(--root-dark-color);
    /* Team member role color */
}

/* ============================================
   CONTACT SECTION COLORS
   ============================================ */
:root {
    /* Contact section */
    --contact-section-background: transparent;
    /* Contact section background */

    /* Contact headings */
    --contact-heading-color: var(--root-primary-color);
    /* Contact section heading color */

    /* Contact lead text */
    --contact-lead-color: var(--root-dark-color);
    /* Contact section lead text color */

    /* Contact form */
    --contact-form-background: rgba(58, 58, 58, 0.85);
    /* Contact form background */
    --contact-form-border-color: var(--root-primary-color);
    /* Contact form border color */
    --contact-form-label-color: black;
    /* Contact form label color */
    --contact-form-input-border-color: var(--root-secondary-color);
    /* Contact form input border color */
    --contact-form-input-focus-border-color: var(--root-primary-color);
    /* Contact form input focus border color */

    /* Contact button */
    --contact-button-background: var(--root-primary-color);
    /* Contact form button background */
    --contact-button-color: white;
    /* Contact form button text color */
    --contact-button-hover-background: var(--root-accent-color);
    /* Contact form button hover background */

    /* Contact callout */
    --contact-callout-background: rgba(58, 58, 58, 0.85);
    /* Contact callout background */
    --contact-callout-border-color: var(--root-primary-color);
    /* Contact callout border color */
    --contact-callout-heading-color: var(--root-primary-color);
    /* Contact callout heading color */
    --contact-callout-strong-color: black;
    /* Contact callout strong text color */
}

/* ============================================
   FOOTER SECTION COLORS
   ============================================ */
:root {
    /* Footer */
    --footer-section-background: transparent;
    /* Footer section background */
    --footer-section-color: black;
    /* Footer section text color */
}

/* ============================================
   ADDITIONAL SHADOWS AND EFFECTS
   ============================================ */
:root {
    /* Box shadows */
    --shadow-small: rgba(0, 0, 0, 0.1);
    /* Small shadow */
    --shadow-medium: rgba(0, 0, 0, 0.15);
    /* Medium shadow */
    --shadow-large: rgba(0, 0, 0, 0.2);
    /* Large shadow */
    --shadow-extra-large: rgba(0, 0, 0, 0.3);
    /* Extra large shadow */

    /* Text shadows */
    --text-shadow-light: rgba(0, 0, 0, 0.2);
    /* Light text shadow */
}