/* ===========================
   Acutus Brand Identity - Bootstrap Enhancement Layer
   ===========================
   
   PURPOSE:
   Brand identity styles for Bootstrap-based pages using base.html.
   Provides consistent visual styling on top of Bootstrap components.
   
   USAGE:
   - Use with base.html and pages that extend it
   - Pair with custom.css for responsive + accessibility features
   - NOT for standalone pages (use styles.css instead)
   
   INCLUDES:
   - Hero section styling
   - Card enhancements
   - Button variants
   - Badge styling
   - Table styling
   - Form focus states
   - Navbar enhancements
   - Loading states
   
   CONSOLIDATION NOTE (Nov 2025):
   This file works with custom.css for base.html pages.
   Standalone pages (help.html, examples.html) now only use styles.css.
   =========================== */

/* Import unified design system for consistency across all interfaces */
@import url('unified-design-system.css');

:root {
    /* Legacy variables mapped to unified system */
    --primary-dark: var(--acutus-dark-800);
    --secondary-dark: var(--acutus-dark-600);
    --accent-blue: var(--acutus-primary);
    --text-primary: var(--acutus-dark-600);
    --text-secondary: var(--acutus-gray-500);
    --bg-light: var(--acutus-gray-100);
    --border-color: var(--acutus-gray-300);
}

body {
    font-family: var(--acutus-font-family);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    background-color: var(--acutus-gray-50);
}

main {
    flex: 1;
}

/* Hero Section - Minimal and Kinetic */
.hero {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(0, 212, 255, 0.1) 50%, transparent 100%);
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.navbar-brand {
    font-weight: var(--acutus-weight-bold);
    font-size: var(--acutus-text-2xl);
    letter-spacing: 2px;
}

/* Accent Elements */
.btn-primary {
    background: var(--accent-blue);
    border: none;
    color: var(--primary-dark);
    font-weight: var(--acutus-weight-semibold);
    transition: all var(--acutus-transition-slow);
}

.btn-primary:hover {
    background: var(--acutus-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--acutus-shadow-primary);
}

/* Cards - Clean and Minimal */
.card {
    border: 1px solid var(--border-color);
    box-shadow: var(--acutus-shadow-sm);
    transition: all var(--acutus-transition-slow);
    background: var(--acutus-white);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--acutus-shadow-md);
    border-color: var(--accent-blue);
}

.card-header {
    font-weight: var(--acutus-weight-semibold);
    border-bottom: 2px solid var(--border-color);
}

.card-header.bg-primary {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 100%) !important;
}

/* Story Content - Surgical Clarity */
.story-content {
    font-size: var(--acutus-text-lg);
    color: var(--text-primary);
    line-height: var(--acutus-leading-relaxed);
}

.expert-responses .card {
    background-color: var(--bg-light);
    border-left: 3px solid var(--accent-blue);
}

footer {
    margin-top: auto;
}

/* Badges - Sharp and Minimal */
.badge {
    font-weight: var(--acutus-weight-medium);
    padding: 0.4em 0.8em;
    border-radius: var(--acutus-radius-sm);
}

.badge.bg-info {
    background-color: var(--accent-blue) !important;
    color: var(--primary-dark);
}

.badge.bg-success {
    background-color: var(--acutus-success) !important;
}

.badge.bg-warning {
    background-color: var(--acutus-warning) !important;
    color: var(--primary-dark);
}

/* Buttons - Precision Design */
.btn {
    font-weight: var(--acutus-weight-medium);
    transition: all var(--acutus-transition-base);
    border-radius: var(--acutus-radius-md);
}

.btn-success {
    background: var(--acutus-success);
    border: none;
}

.btn-success:hover {
    background: var(--acutus-success-dark);
}

.btn-info {
    background: var(--accent-blue);
    border: none;
    color: var(--primary-dark);
}

.btn-info:hover {
    background: var(--acutus-primary-hover);
}

/* Active States - Signal Clarity */
.list-group-item.active {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--primary-dark);
}

/* Typography - Geometric and Clean */
.display-4 {
    font-weight: var(--acutus-weight-bold);
    color: var(--acutus-white);
    letter-spacing: -0.5px;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.3px;
    font-weight: var(--acutus-weight-semibold);
    color: var(--primary-dark);
}

/* Tables - Structured Data */
table {
    font-size: var(--acutus-text-sm);
}

table thead {
    background-color: var(--bg-light);
    border-bottom: 2px solid var(--accent-blue);
}

/* Accent Lines - Signal Transmission */
.border-primary {
    border-color: var(--accent-blue) !important;
}

/* Forms - Precision Input */
.form-control:focus,
.form-select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

/* Navbar Enhancement */
.navbar {
    box-shadow: var(--acutus-shadow-md);
}

/* Loading States */
.spinner-border {
    border-color: var(--accent-blue);
    border-right-color: transparent;
}