/**
 * Precursor Brand System — Shared CSS
 * Location: docs/shared-brand/css/precursor-brand.css
 * 
 * SINGLE SOURCE OF TRUTH for all Precursor apps.
 * Every app in docs/ references this file:
 *   <link rel="stylesheet" href="../shared-brand/css/precursor-brand.css">
 * 
 * Load AFTER each app's own stylesheets so overrides win.
 * 
 * ─── BRAND PALETTE ───────────────────────────────────
 *   Navy:     #0B1D3A  primary dark, page backgrounds
 *   Teal:     #00A6A0  primary accent, interactive elements
 *   Gold:     #D4A843  highlights, goal/status indicators
 *   Cloud:    #F4F5F7  light surface backgrounds
 *   Midnight: #1E3A5F  secondary dark
 *   Slate:    #94A3B8  muted text
 *   Ink:      #0F172A  deepest dark
 * 
 * ─── BRAND FONTS ─────────────────────────────────────
 *   Sora              — headings, wordmark, UI labels
 *   Plus Jakarta Sans — body text, descriptions, inputs
 * 
 * ─── ICON SYMBOLISM ──────────────────────────────────
 *   Gold center     → organizational goal
 *   Inner ring      → agent's direct perception (solid)
 *   Middle ring     → operational context (semi-transparent)
 *   Dashed outer    → digital shadow boundary
 */

/* ==========================================
   CSS CUSTOM PROPERTIES — BRAND TOKENS
   ========================================== */
:root {
    /* Brand palette */
    --navy: #0B1D3A;
    --teal: #00A6A0;
    --teal-light: #00C4BD;
    --teal-dim: rgba(0, 166, 160, 0.08);
    --gold: #D4A843;
    --cloud: #F4F5F7;
    --midnight: #1E3A5F;
    --slate: #94A3B8;
    --ink: #0F172A;

    /* Semantic remapping (overrides any app's defaults) */
    --primary-color: var(--teal);
    --primary-dark: var(--navy);
    --warning-color: var(--gold);
    --info-color: var(--teal);

    --bg-gradient: linear-gradient(135deg, var(--navy) 0%, var(--midnight) 100%);
    --bg-light: var(--cloud);

    --shadow-md: 0 10px 25px rgba(0, 166, 160, 0.12);
}

/* ==========================================
   FONT DECLARATIONS
   ========================================== */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.section-title,
.wizard-phase-title,
.metric-value {
    font-family: 'Sora', sans-serif;
}

button,
input,
textarea,
select {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ==========================================
   SHARED HEADER — PRECURSOR LOGO
   
   HTML pattern for any app:
   
   <div class="header">
     <div class="header-brand">
       <svg class="header-logo" ...>...</svg>
     </div>
     <div class="header-context">
       <span class="context-separator">—</span>
       <span class="context-label">App Name</span>
     </div>
     <p class="tagline">App description</p>
   </div>
   ========================================== */
.header-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4px;
}

.header-logo {
    height: 40px;
    width: auto;
    display: block;
}

.header-context {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.context-separator {
    color: var(--teal);
    opacity: 0.4;
    font-weight: 300;
    font-size: 1.1rem;
}

.context-label {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Hide legacy hospital-name if present */
.header .hospital-name {
    display: none;
}

/* Tagline */
.header > .tagline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    opacity: 0.6;
    color: var(--slate);
}

/* ==========================================
   VIEW TOGGLE — TEAL ACCENT
   ========================================== */
.view-toggle-btn {
    border-color: rgba(0, 166, 160, 0.2);
    background: rgba(0, 166, 160, 0.05);
    color: rgba(255, 255, 255, 0.7);
}

.view-toggle-btn:hover {
    background: rgba(0, 166, 160, 0.12);
    border-color: rgba(0, 166, 160, 0.4);
    color: white;
}

.view-toggle-btn.active {
    background: white;
    color: var(--navy);
    border-color: white;
}

/* ==========================================
   TAB BUTTONS
   ========================================== */
.tab-button:hover {
    color: var(--teal);
    background: rgba(0, 166, 160, 0.05);
}

.tab-button.active {
    color: var(--teal);
}

/* ==========================================
   CARDS & INTERACTIVE SURFACES
   ========================================== */
.document-card:hover,
.project-card:hover {
    border-color: var(--teal);
}

.document-card.selected {
    border-color: var(--teal);
    background: var(--teal-dim);
}

.automation-badge {
    background: var(--teal);
}

.sources-box {
    background: var(--teal-dim);
    color: var(--midnight);
}

.start-wizard-hint {
    color: var(--teal);
}

/* ==========================================
   METRICS
   ========================================== */
.metric-value {
    color: var(--teal);
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn-primary {
    background: var(--teal);
}

.btn-primary:hover {
    background: var(--teal-light);
    box-shadow: 0 4px 12px rgba(0, 166, 160, 0.3);
}

.btn-secondary:hover {
    border-color: var(--teal);
    color: var(--teal);
}

/* ==========================================
   WIZARD — PHASES
   ========================================== */
.phase-item.active .phase-indicator {
    background: var(--teal);
    box-shadow: 0 4px 12px rgba(0, 166, 160, 0.35);
}

.phase-item.active .phase-name {
    color: var(--teal);
}

.wizard-persona {
    background: var(--teal);
}

.wizard-back-btn:hover,
.btn-change-project:hover {
    border-color: var(--teal);
    color: var(--teal);
}

/* ==========================================
   PROGRESS BARS
   ========================================== */
.progress-fill {
    background: linear-gradient(90deg, var(--teal), var(--teal-light));
}

/* ==========================================
   GENERATION — PASS ITEMS & ANIMATION
   ========================================== */
.pass-item.active .pass-indicator {
    background: var(--teal);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 166, 160, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(0, 166, 160, 0);
    }
}

/* ==========================================
   VALIDATION & CRITIQUE
   ========================================== */
.score-circle {
    background: linear-gradient(135deg, var(--navy) 0%, var(--midnight) 100%);
}

.ai-suggest-btn {
    background: linear-gradient(135deg, var(--navy) 0%, var(--midnight) 100%);
}

/* ==========================================
   APPROVAL
   ========================================== */
.approval-option:hover {
    border-color: var(--teal);
}

.approval-option.selected {
    border-color: var(--teal);
    background: var(--teal-dim);
}

.approval-option input[type="radio"] {
    accent-color: var(--teal);
}

/* ==========================================
   CONTEXT / SCOPING — TOKEN BAR & SOURCES
   ========================================== */
.token-fill {
    background: var(--teal);
}

.source-item:hover {
    background: var(--teal-dim);
}

.source-item.selected {
    background: rgba(0, 166, 160, 0.08);
    border-color: var(--teal);
}

.source-item input[type="checkbox"],
.criteria-item input[type="checkbox"],
.agent-tree-node input[type="checkbox"] {
    accent-color: var(--teal);
}

/* ==========================================
   FORM FOCUS STATES
   ========================================== */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--teal);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 166, 160, 0.12);
}

.add-criteria-btn:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.editor-toolbar button:hover {
    border-color: var(--teal);
}

/* ==========================================
   NOTIFICATIONS
   ========================================== */
.notification-info {
    background: var(--teal);
}

/* ==========================================
   GOLD ACCENTS — GOAL/STATUS
   ========================================== */
.wizard-project {
    background: var(--gold);
    color: var(--navy);
}

.wizard-project.no-project {
    background: var(--gold);
    opacity: 0.7;
}

/* ==========================================
   LOADING SPINNER
   
   Usage (inline SVG):
     <div class="precursor-spinner">
       <svg>...animated spinner SVG...</svg>
     </div>
   
   Usage (GIF):
     <img class="precursor-spinner" src="../shared-brand/assets/precursor-spinner-96.gif">
   
   Usage (with loading text):
     <div class="precursor-loading">
       <img class="precursor-spinner" src="../shared-brand/assets/precursor-spinner-96.gif">
       <span>Generating document...</span>
     </div>
   ========================================== */
.precursor-spinner {
    display: inline-block;
    width: 48px;
    height: 48px;
}

.precursor-spinner.sm { width: 24px; height: 24px; }
.precursor-spinner.md { width: 48px; height: 48px; }
.precursor-spinner.lg { width: 96px; height: 96px; }
.precursor-spinner.xl { width: 128px; height: 128px; }

.precursor-spinner svg {
    width: 100%;
    height: 100%;
}

.precursor-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px;
    color: var(--text-secondary, #64748b);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .header-logo {
        height: 32px;
    }

    .context-label {
        font-size: 0.85rem;
        letter-spacing: 0.15em;
    }
}

@media (max-width: 480px) {
    .header-logo {
        height: 28px;
    }

    .header-context {
        flex-direction: column;
        gap: 4px;
    }

    .context-separator {
        display: none;
    }
}