/* ========================================
   56k Knowledge Hub - Base Shared Styles
   Centralized design tokens and global primitives
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #7C3AED;
    --primary-dark: #6D28D9;
    --secondary: #EC4899;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --dark: #1F2937;
    --light: #F9FAFB;
    --border: #E5E7EB;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --transition: 0.3s cubic-bezier(.4,0,.2,1);
}

/* Dark theme token overrides */
:root[data-theme="dark"] {
    --primary: #8B5CF6;
    --primary-dark: #7C3AED;
    --secondary: #F472B6;
    --success: #34D399;
    --warning: #FBBF24;
    --danger: #F87171;
    --dark: #0F172A;
    --light: #1E293B;
    --border: #334155;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    line-height: 1.6;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Source reference highlighting */
.rag-support.highlight { outline: 2px solid var(--accent-color, #4b74ff); background: rgba(75,116,255,0.08); transition: background .3s; }
.source-ref { color: var(--accent-color, #4b74ff); font-weight: 600; }
.source-ref:hover { text-decoration: underline; }

/* Shared loading screen */
.loading-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity var(--transition);
}

.loading-screen.hidden { opacity: 0; pointer-events: none; }

.loading-logo {
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 28px;
    animation: pulse 2s infinite;
    box-shadow: 0 8px 30px -8px rgba(0,0,0,.25);
}

.loading-text { color: #fff; font-size: 17px; margin-bottom: 18px; }

.loading-spinner {
    width: 42px; height: 42px; border:4px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation: spin 1s linear infinite;
}

@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes spin { to { transform: rotate(360deg); } }

/* Focus outline for accessibility */
:focus-visible {
    outline: 3px solid rgba(124,58,237,0.4);
    outline-offset: 2px;
}

/* Base button normalization (can be extended) */
.btn {
    font-family: inherit;
    line-height: 1.2;
    border-radius: var(--radius-lg);
    position: relative;
}

/* Button variants */
.btn-outline {
    background: #fff;
    color: var(--dark);
    border: 1px solid var(--border);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-outline:hover { background: var(--light); border-color: var(--primary); }
.btn-outline:focus-visible { outline: 3px solid rgba(124,58,237,0.4); outline-offset:2px; }

.btn-gradient {
    background: linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
    color: #fff;
    border: none;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}
.btn-gradient:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn-gradient:disabled { opacity:.55; filter:none; transform:none; cursor:not-allowed; }

/* Contextual variants */
.btn-danger, .btn-warning { 
    border: none; 
    padding: 10px 18px; 
    font-size:14px; 
    font-weight:600; 
    cursor:pointer; 
    border-radius: var(--radius-lg); 
    color:#fff; 
    display:inline-flex; 
    align-items:center; 
    gap:6px; 
    transition: var(--transition); 
}
.btn-danger { background: var(--danger); }
.btn-danger:hover { filter:brightness(1.08); }
.btn-warning { background: var(--warning); color:#1F2937; }
.btn-warning:hover { filter:brightness(1.05); }
.btn-danger:disabled, .btn-warning:disabled { opacity:.55; filter:none; cursor:not-allowed; }

/* Dark mode subtle adjustments for button surfaces */
:root[data-theme="dark"] .btn-outline { background:#1E293B; color:var(--text-primary); border-color:#334155; }
:root[data-theme="dark"] .btn-outline:hover { background:#243044; }
:root[data-theme="dark"] .btn-gradient { box-shadow:0 4px 18px -4px rgba(124,58,237,0.45); }
:root[data-theme="dark"] .btn-danger { background:#DC2626; }
:root[data-theme="dark"] .btn-warning { background:#D97706; color:#fff; }

.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Theme toggle switch */
.theme-toggle {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:12px;
    color: var(--text-secondary);
}
.theme-toggle button {
    background: var(--dark);
    color:#fff;
    border:1px solid var(--border);
    padding:6px 12px;
    border-radius: var(--radius-lg);
    font-size:12px;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition: var(--transition);
}
.theme-toggle button:hover { background: var(--primary); border-color: var(--primary); }
:root[data-theme="dark"] .theme-toggle button { background:#1E293B; color:var(--text-secondary); }
:root[data-theme="dark"] .theme-toggle button:hover { background: var(--primary); color:#fff; }