/**
 * ===================================================
 * BSA Base Identity
 * Purpose: Style Overrides for BIRIcore Theme
 * Usage: These were gathered from existing BSA sites
 * ===================================================
 */
 :root {
    /* ===== Brand Colors ===== */
    /* Primary color palette */
    --primary: #74160c;          /* Maroon/dark red – primary brand color */
    --primary-dark: #5c1008;     /* Darker maroon for hover states, borders */
    --secondary: #767676;        /* Gray – accent color */
    --highlight-color: #f9f0ec;  /* Light pink – subtle backgrounds, accents */
    --dark-mode: #000000; /* Black black
    

    /* Extended color palette - brand-specific accent colors */
    --accent-1: #333333;         /* Dark gray - used in footer */
    --accent-2: #2a2a2a;         /* Slightly darker gray - used in footer bottom */
    --accent-3: var(--secondary); /* Same as secondary - Gray */
    
    /* Functional UI colors */
    --ui-light: #ffffff;         /* White - main page background */
    --ui-light-alt: #f5f5f5;     /* Light gray - alternative background */
    --ui-dark: #111111;          /* Dark gray - text color */
    --ui-mid: #cccccc;           /* Light gray for subtle borders */
    --shadow-color: rgba(0,0,0,0.15); /* For shadows and overlays */
    --button-text-color: #ffffff; /* Text color for buttons */

    /* NEW: Color relationship variables - CRITICAL FOR READABILITY */
    /* These ensure text and interactive elements remain visible regardless of background */
    --text-on-primary: #ffffff;       /* Text that appears ON primary color background */
    --text-on-primary-dark: #ffffff;  /* Text that appears ON primary-dark background */
    --text-on-secondary: #ffffff;     /* Text that appears ON secondary color background */
    --text-on-ui-light: var(--ui-dark); /* Text that appears ON light backgrounds */
    --text-on-ui-light-alt: var(--ui-dark); /* Text that appears ON light-alt backgrounds */
    --text-on-accent-1: #ffffff;      /* Text that appears ON accent-1 background */
    --text-on-accent-2: #ffffff;      /* Text that appears ON accent-2 background */
    --text-on-dark-mode: #ffffff;

    /* NEW: Interactive element colors - ENSURES VISIBILITY */
    --interactive-on-primary: var(--highlight-color);     /* Interactive elements on primary */
    --interactive-hover-on-primary: var(--ui-light);      /* Hover state on primary */
    --interactive-on-primary-dark: var(--highlight-color); /* Interactive elements on primary-dark */
    --interactive-hover-on-primary-dark: var(--ui-light);  /* Hover state on primary-dark */
    --interactive-on-accent-1: var(--highlight-color);    /* Interactive elements on accent-1 */
    --interactive-hover-on-accent-1: var(--ui-light);     /* Hover state on accent-1 */
    --interactive-on-light: var(--primary);               /* Interactive elements on light */
    --interactive-hover-on-light: var(--primary-dark);    /* Hover state on light */
    
    /* ===== Background Applications ===== */
    --background-body: var(--ui-light);
    --background-alt: var(--ui-light-alt);
    
    /* Header Backgrounds */
    --background-header-top-bar: var(--accent-1); 
    --background-header-main-bar: var(--primary); /* Maroon background for header */
    
    /* Footer Backgrounds */
    --background-footer-top: var(--accent-1);     /* Dark gray for footer - matches BSA site */
    --background-footer-bottom: var(--accent-2);  /* Slightly darker gray */
    
    /* ===== Text Colors ===== */
    --text-color: var(--ui-dark);                 /* Main text color - dark gray */
    --heading-color: var(--primary);              /* Heading color - maroon */
    
    /* Link Colors */
    --link-color: var(--primary);                 /* Link color - maroon */
    --link-hover-color: var(--primary-dark);      /* Link hover - darker maroon */
    
    /* Header Text Colors - UPDATED TO USE RELATIONSHIP VARIABLES */
    --header-top-bar-text-color: var(--text-on-accent-1);
    --header-top-bar-link-color: var(--text-on-accent-1);
    --header-top-bar-link-hover-color: var(--interactive-on-accent-1);
    
    --header-main-bar-text-color: var(--text-on-primary);
    --header-main-bar-link-color: var(--text-on-primary);
    --header-main-bar-link-hover-color: var(--interactive-on-primary);
    
    --site-title-color: var(--text-on-primary);
    --site-title-hover-color: var(--interactive-on-primary);

    /* Footer Text Colors - UPDATED TO USE RELATIONSHIP VARIABLES */
    --background-footer-top-text-color: var(--text-on-accent-1);     
    --background-footer-bottom-text-color: var(--text-on-accent-2);
    
    /* Navigation Colors - UPDATED TO USE RELATIONSHIP VARIABLES */
    --nav-text-color: var(--text-on-primary);
    --nav-indicator-color: var(--text-on-primary);
    --nav-hover-color: var(--interactive-on-primary);
    --nav-hover-indicator-color: var(--interactive-on-primary);
    
    /* ===== Typography ===== */
    --font-body: 'Open Sans', sans-serif;         /* Default text */
    --font-headings: 'Montserrat', sans-serif;    /* Headings (h1–h6) */
    --font-size: 1rem;                            /* Base font size */
    --font-size-small: 0.875rem;                  /* Secondary text (meta) */
    --line-height: 1.6;
    --heading-line-height: 1.25;
    
    /* ===== Layout & Spacing ===== */
    --container-max-width: 1280px;                /* Width of main container */
    --content-spacing: 2rem;                      /* Spacing between major content sections */
    --header-vertical-padding: 1.5rem;            /* Vertical padding in header */
    --footer-top-padding-top: 2rem;               /* Top padding for footer top */
    --footer-top-padding-bottom: 1rem;            /* Bottom padding for footer top */
    --footer-bottom-padding: 2rem;                /* Vertical padding for footer bottom */
    
    /* ===== Borders & Shadows ===== */
    --border-color: var(--ui-mid);                /* Light gray for subtle borders */
    --border-accent: var(--primary);              /* Maroon for accent borders */
    --card-shadow: 0px 1px 6px var(--shadow-color); /* Shadow for card-like elements */
    --border-radius: 4px;                         /* Rounded corners for buttons and elements */
}