/* base.css
 * ============================================
 * Core foundation: Root variables, resets, and base typography.
 * This file loads first and establishes the design system foundation.
 *
 * Purpose: Define CSS custom properties (variables) used throughout
 * the application and minimal typography/reset rules.
 *
 * Last updated: 2025-12-25
 * See: docs/delivery/74-bootstrap-vanilla-css/74-4.md
 */

/* === ROOT VARIABLES ===
 * Centralized theme configuration
 * These variables are used across all CSS files
 */
:root {
    /* Primary Theme Colors */
    --bs-primary: #8B4513;     /* Saddle Brown */
    --bs-primary-rgb: 139, 69, 19;
    --bs-secondary: #2F4F4F;   /* Dark Slate Gray */
    --bs-secondary-rgb: 47, 79, 79;

    /* Background Colors */
    --bs-body-bg: #F5F5DC;     /* Beige background */
    --bs-body-bg-rgb: 245, 245, 220;

    /* Border Colors */
    --bs-border-color: #D2B48C; /* Tan */

    /* Accent Colors */
    --bs-warning: #FFD700;     /* Goldenrod - for collection star */
    --bs-card-bg: #ffffff;     /* White card background */

    /* Navigation and Layout */
    --navbar-height: 56px;
    --sticky-top-offset: var(--navbar-height);
    --sidebar-width: 280px;
    --bs-primary-dark: #704010; /* Darker shade of primary */

    /* Z-index hierarchy - centralized for consistency */
    --z-index-base: 1;
    --z-index-card: 2;
    --z-index-header: 3;
    --z-index-progress: 4;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-overlay: 1025;
    --z-index-sidebar: 1029;
    --z-index-fixed: 1030;
    --z-index-navbar: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-floating-button: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* Spacing scale (matches Bootstrap) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 3rem;

    /* Typography */
    --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem;
    --line-height-base: 1.5;
}

/* Larger navbar on large screens */
@media (min-width: 992px) {
    :root {
        --navbar-height: 60px;
        --sticky-top-offset: var(--navbar-height);
    }
}

/* === BASE TYPOGRAPHY ===
 * Minimal resets that complement Bootstrap's reboot
 */
html {
    /* Bug fix 038: Removed overflow-x:hidden that masked layout bugs.
     * Root cause fixes applied to individual components instead.
     * See: specs/038-mobile-style-refresh/spec.md FR-001 */
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: #212529;
    background-color: var(--bs-body-bg);
}

/* Heading defaults */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Paragraph spacing */
p {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Link defaults - inherit color, remove underline */
a {
    color: inherit;
    text-decoration: none;
}

/* Image defaults */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Navbar brand images - explicit dimensions prevent CLS */
.brand-quotewise .navbar-brand img {
    width: 144px;
    height: 32px;
    aspect-ratio: 144 / 32;
}
.brand-quotosaurus .navbar-brand img {
    width: 28px;
    height: 28px;
    aspect-ratio: 1;
}

/* Focus ring behavior: keyboard-only
 * Prevents persistent highlight after click/tap
 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn-link:focus:not(:focus-visible),
[data-bs-toggle]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* === BOOTSTRAP ICON ALIGNMENT FIX ===
 * Bootstrap icons default to vertical-align: -0.125em on ::before
 * This causes icons to sit low relative to adjacent text/elements.
 * Global override to middle alignment - no known use case for the default.
 */
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    vertical-align: middle;
}

/* === ACCESSIBILITY: Color Contrast Fix ===
 * Bootstrap's disabled #6c757d is borderline WCAG AA, darken slightly
 */
.page-item.disabled .page-link {
    color: #595959; /* ~7:1 contrast vs white, still visually "muted" */
}