/**
 * ===================================================
 * BIRI Base Identity Theme (v1)
 * Purpose: Institutional style based on official Brand Guidelines
 * Note: Using alternative fonts as official fonts are not licensed
 * ===================================================
 */
 :root {
    /* ===== Brand Colors ===== */
    /* Primary color palette - from branding guidelines */
    --primary: #1d1d1b;          /* Black – primary text, headings */
    --primary-dark: #000000;     /* Darker black for hover states, borders */
    --secondary: #cc472e;        /* Red – brand highlight color */
    --highlight-color: #b89673;  /* Stone – secondary brand color */
    
    /* Extended color palette - brand-specific accent colors */
    --accent-1: #87c9cf;         /* Light blue - additional accent */
    --accent-2: #b89673;         /* Stone - same as highlight-color */
    --accent-3: #3da18f;         /* Teal - additional accent */
    
    /* Functional UI colors */
    --ui-light: #ffffff;         /* White - main page background */
    --ui-light-alt: #f5f5f5;     /* Light gray - alternative background */
    --ui-dark: #1d1d1b;          /* Black - same as primary */
    --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 */
    
    /* 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-light: var(--secondary);             /* Interactive elements on light */
    --interactive-hover-on-light: var(--primary);         /* Hover state on light */
    
    /* ===== Background Applications ===== */
    --background-body: var(--ui-light);
    --background-alt: var(--ui-light-alt);
    
    /* Header Backgrounds */
    --background-header-top-bar: var(--primary);     /* Black background for top bar */
    --background-header-main-bar: var(--secondary);  /* Red background for main bar */
    
    /* Footer Backgrounds */
    --background-footer-top: var(--highlight-color);    /* Stone background for footer top */
    --background-footer-bottom: var(--accent-1);        /* Light blue for footer bottom */


    /* ======================CARDS ================================== */
   
    /* Card Backgrounds */
    --background-card-light: var(--ui-light-alt);

    /* Card Hover */
    --featured-hover-bg: var(--primary);
    --featured-hover-border: var(--primary);
    --realm-hover-bg:var(--accent-1) ;
    --realm-hover-border:var(--accent-1);
    --meta-hover-bg:white;
    --meta-hover-border: var(--accent-1);

    /* Card Section Backgrouns */
    --background-featured-section: #f8f8f8;
    --background-gateways-section: #f0f0f0;
    --background-meta-section: #e8e8e8;

    /* Meta cards section background */
    --meta-grid-bg: var(--ui-mid);

    
    /* ===== Text Colors ===== */
    --text-color: var(--primary);            /* Main body text - black */
    --heading-color: var(--primary);         /* Headings - black */
    
    /* Link Colors */
    --link-color: var(--secondary);          /* Link color - red */
    --link-hover-color: var(--highlight-color); /* Link hover - stone */
    
    /* Header Text Colors - UPDATED TO USE RELATIONSHIP VARIABLES */
    --header-top-bar-text-color: var(--text-on-primary);
    --header-top-bar-link-color: var(--text-on-primary);
    --header-top-bar-link-hover-color: var(--interactive-on-primary);
    
    --header-main-bar-text-color: var(--text-on-secondary);
    --header-main-bar-link-color: var(--text-on-secondary);
    --header-main-bar-link-hover-color: var(--interactive-on-secondary, var(--ui-light));
    
    --site-title-color: var(--text-on-secondary);
    --site-title-hover-color: var(--interactive-on-secondary, var(--ui-light));
    
    /* Navigation Colors - UPDATED TO USE RELATIONSHIP VARIABLES */
    --nav-text-color: var(--text-on-secondary);
    --nav-indicator-color: var(--text-on-secondary);
    --nav-hover-color: var(--interactive-on-secondary, var(--ui-light));
    --nav-hover-indicator-color: var(--interactive-on-secondary, var(--ui-light));
    
    /* ===== Typography ===== */
    /* Note: the official fonts are not licensed and thus not available
     for theming:
     --font-body: 'Haas Grot', sans-serif;
     --font-headings: 'Tobias', sans-serif; */
    --font-body: 'IBM Plex Sans', sans-serif;     /* Default text */
    --font-headings: 'Merriweather', 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);              /* Black 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 */
}