/**
 * ===================================================
 * BIPS Base Identity (v1)
 * Purpose: British Institute of Persian Studies identity
 * Based on the visual identity used at bips.ac.uk
 * ===================================================
 */

:root {
    /* ===== Brand Colors ===== */
    /* Teal is the dominant colour in the BIPS logo and published materials. */
    --primary: #3AAFA9;              /* BIPS teal */
    --primary-dark: #00656b;         /* Dark teal for hover states and borders */
    --secondary: #112d32;            /* Steel green */
    --highlight-color: #d6b36a;      /* Warm Persian-gold accent */

    /* Extended color palette */
    --accent-1: #5bb7b5;             /* Light teal */
    --accent-2: #ead9b2;             /* Soft gold */
    --accent-3: #7c5268;             /* Muted plum accent */

    /* Functional UI colors */
    --ui-light: #f7f5e6;
    --ui-light-alt: #ffffff;
    --ui-dark: #1f2930;
    --ui-mid: #c6d3d5;
    --shadow-color: rgba(31, 41, 48, 0.15);
    --button-text-color: #ffffff;

    /* ===== Color Relationships ===== */
    --text-on-primary: #ffffff;
    --text-on-primary-dark: #ffffff;
    --text-on-secondary: #ffffff;
    --text-on-ui-light: var(--ui-dark);
    --text-on-ui-light-alt: var(--ui-dark);
    --text-on-accent-1: #123c40;
    --text-on-accent-2: var(--ui-dark);
    --text-on-dark-mode: #ffffff;

    /* ===== Interactive Element Colors ===== */
    --interactive-on-primary: var(--highlight-color);
    --interactive-hover-on-primary: var(--ui-light);
    --interactive-on-primary-dark: var(--highlight-color);
    --interactive-hover-on-primary-dark: var(--ui-light);
    --interactive-on-secondary: var(--accent-1);
    --interactive-hover-on-secondary: var(--ui-light);
    --interactive-on-light: var(--primary-dark);
    --interactive-hover-on-light: var(--primary);

    /* ===== Background Applications ===== */
    --background-body: var(--ui-light);
    --background-alt: var(--ui-light-alt);

    --background-header-top-bar: var(--secondary);
    --background-header-main-bar: var(--primary);

    --background-footer-top: var(--secondary);
    --background-footer-bottom: var(--secondary);

    /* ===== Cards and Sections ===== */
    --background-card-light: var(--ui-light-alt);
    --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: var(--accent-2);
    --meta-hover-border: var(--highlight-color);
    --background-featured-section: #eef7f7;
    --background-gateways-section: #f5f8f8;
    --background-meta-section: #faf5e9;
    --meta-grid-bg: var(--ui-mid);

    /* ===== Text Colors ===== */
    --text-color: var(--ui-dark);
    --heading-color: var(--secondary);

    --link-color: var(--primary-dark);
    --link-hover-color: var(--primary);

    --header-top-bar-text-color: var(--text-on-secondary);
    --header-top-bar-link-color: var(--text-on-secondary);
    --header-top-bar-link-hover-color: var(--interactive-on-secondary);

    --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);

    --background-footer-top-text-color: var(--text-on-secondary);
    --background-footer-bottom-text-color: var(--text-on-primary-dark);

    --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;
    --font-headings: 'Noto Serif', Georgia, serif;
    --font-size: 1rem;
    --font-size-small: 0.875rem;
    --line-height: 1.6;
    --heading-line-height: 1.25;

    /* ===== Layout and Spacing ===== */
    --container-max-width: 1280px;
    --content-spacing: 2rem;
    --header-vertical-padding: 1.5rem;
    --footer-top-padding-top: 2rem;
    --footer-top-padding-bottom: 1rem;
    --footer-bottom-padding: 2rem;

    /* ===== Borders and Shadows ===== */
    --border-color: var(--ui-mid);
    --border-accent: var(--primary);
    --card-shadow: 0 1px 6px var(--shadow-color);
    --border-radius: 4px;
}