/*
 * Instance-specific color overrides.
 * Professional color palette with sophisticated slate gray theme.
 * This file is loaded after style.css, so values here take precedence.
 *
 * TIP: Change just --tp-primary and --tp-footer-bg for a quick rebrand.
 * The component variables (header, nav, title, etc.) inherit from the
 * base palette by default, so changing a base color propagates everywhere.
 */

:root {
    /* ── Base palette ─────────────────────────────────────────────── */
    --tp-primary: #627578;            /* Sophisticated slate gray - main brand color */
    --tp-primary-dark: #4a5558;       /* Darker slate for hover states */
    --tp-primary-light: #e8eaeb;      /* Light slate tint for hover backgrounds */
    --tp-bg: #f8fafc;                 /* Page background */
    --tp-surface: #ffffff;            /* Card / content background */
    --tp-text: #1a202c;              /* Dark text for WCAG AA contrast */
    --tp-text-dark: #1a202c;         /* Headings, strong text */
    --tp-text-secondary: #2d3748;    /* Secondary text with good contrast */
    --tp-muted: #4a5568;             /* Muted / helper text */
    --tp-border: #e2e8f0;            /* Borders, dividers */

    /* ── Typography ─────────────────────────────────────────────────── */
    /* --tp-font-size-base: 16px;       Base font size */
    /* --tp-font-size-sm: 14px;         Small text */
    /* --tp-font-size-lg: 18px;         Large text */
    /* --tp-font-size-xl: 20px;         Extra large text */
    /* --tp-font-size-2xl: 24px;        2X large text */
    /* --tp-line-height-base: 1.5;     Base line height */

    /* ── Header ───────────────────────────────────────────────────── */
    /* --tp-header-bg: var(--tp-surface);       Header background */
    /* --tp-header-border: var(--tp-border);    Header bottom border */
    --tp-header-title: #4b5659;  /* Site title color */
    /* --tp-header-title-link: var(--tp-primary); Header title link color */
    /* --tp-header-subtitle: var(--tp-muted);   Site subtitle color */

    /* ── Navigation ───────────────────────────────────────────────── */
    /* --tp-nav-text: var(--tp-text-secondary);  Nav link text */
    /* --tp-nav-hover: var(--tp-primary);        Nav link hover */
    /* --tp-nav-active-bg: var(--tp-primary);    Active nav background */
    /* --tp-nav-active-text: #ffffff;            Active nav text */

    /* ── Search ───────────────────────────────────────────────────── */
    /* --tp-search-bg: var(--tp-surface);       Search input background */
    /* --tp-search-border: var(--tp-border);     Search input border */
    /* --tp-search-text: var(--tp-text);         Search input text */
    /* --tp-search-icon: var(--tp-muted);        Search icon color */
    /* --tp-search-btn-bg: var(--tp-surface);    Search button background */
    /* --tp-search-btn-border: var(--tp-border); Search button border */
    /* --tp-search-btn-hover: var(--tp-primary);  Search button hover */

    /* ── Page title banner ────────────────────────────────────────── */
    /* --tp-title-bg: var(--tp-primary);         Banner gradient start */
    /* --tp-title-bg-dark: var(--tp-primary-dark); Banner gradient end */
    /* --tp-title-text: #ffffff;                 Banner text */

    /* ── Footer ───────────────────────────────────────────────────── */
    --tp-footer-bg: #1a202c;          /* Very dark footer for WCAG AA contrast */
    --tp-footer-text: #f7fafc;        /* Light footer body text for contrast */
    --tp-footer-link: #e2e8f0;        /* Light gray footer link color */
    --tp-footer-hover: #ffffff;       /* White footer link hover for maximum contrast */
    --tp-footer-muted: #a0aec0;       /* Footer small / muted text */

    /* ── Tables ───────────────────────────────────────────────────── */
    --tp-table-header-bg: #627578;   /* Primary slate gray table header background */
    --tp-table-header-text: #ffffff;  /* White table header text */

    /* ── Accordion ────────────────────────────────────────────────── */
    /* --tp-accordion-bg: #f1f5f9;                        Collapsed background */
    /* --tp-accordion-text: var(--tp-text-dark);           Collapsed text */
    /* --tp-accordion-active-bg: var(--tp-primary-light);  Expanded background */
    /* --tp-accordion-active-text: var(--tp-primary-dark); Expanded text */

    /* ── Return to top button ─────────────────────────────────────── */
    --tp-return-to-top-bg: var(--tp-primary);  /* Use our slate gray primary */
    --tp-return-to-top-hover: var(--tp-primary-dark); /* Darker slate on hover */
    --tp-return-to-top-icon: #ffffff;          /* White icon for contrast */

    /* ── Shapes ───────────────────────────────────────────────────── */
    --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);    /* Small shadow */
    --tp-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* Medium shadow */
    --tp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* Large shadow */
    --tp-shadow-return-to-top: 0 6px 12px rgba(98, 117, 120, 0.3); /* Return to top hover shadow with slate gray */
    /* --tp-radius: 0.5rem;              Default border radius */
    /* --tp-radius-lg: 0.75rem;          Large border radius */
}

/* Override return to top button shadow to use slate gray instead of blue */
#return-to-top:hover {
    box-shadow: var(--tp-shadow-return-to-top) !important;
}