/**
 * NeuroGen Platform - Master Design System
 * Core CSS variables and base styles for all modules
 *
 * USAGE:
 *   @import url('/static/css/design-system.css');
 *
 *   Or in HTML:
 *   <link rel="stylesheet" href="/static/css/design-system.css">
 *
 * Created: January 14, 2026
 * Version: 1.0
 */

/* ==========================================
   NEURAL COLOR SYSTEM
   The foundation of all NeuroGen styling
   ========================================== */
:root {
    /* === BACKGROUNDS (Dark to Light) === */
    --neural-void: #0f1419;           /* Deepest background, body */
    --neural-deep: #15202b;           /* Secondary backgrounds, cards */
    --neural-surface: #192734;        /* Elevated surfaces, modals */
    --neural-elevated: #22303c;       /* Hover states, highlights */

    /* === BORDERS & DIVIDERS === */
    --neural-border: rgba(136, 153, 166, 0.15);        /* Subtle borders */
    --neural-border-accent: rgba(136, 153, 166, 0.25); /* Emphasized borders */
    --neural-divider: rgba(136, 153, 166, 0.1);        /* Section dividers */
    --neural-border-strong: rgba(136, 153, 166, 0.28);  /* Strong borders, active states */

    /* ==========================================
       SYNAPSE ACCENT COLORS
       Primary interactive color palette
       ========================================== */

    /* Primary - Google-Inspired Blue */
    --synapse-cyan: #8ab4f8;          /* Primary accent, links, CTAs */
    --synapse-cyan-hover: #aecbfa;    /* Hover state */
    --synapse-cyan-muted: rgba(138, 180, 248, 0.15);  /* Backgrounds */
    --synapse-cyan-glow: rgba(138, 180, 248, 0.4);    /* Box shadows */

    /* Secondary Accents */
    --synapse-teal: #78d9ec;          /* Secondary highlights */
    --synapse-emerald: #81c995;       /* Success states */
    --synapse-amber: #fdd663;         /* Warning states */
    --synapse-rose: #f28b82;          /* Error states */
    --synapse-violet: #c58af9;        /* Special accents */

    /* Module Accent Colors — True cyan used across all dashboard modules */
    --module-cyan: #22d3ee;
    --module-cyan-rgb: 34, 211, 238;
    --module-cyan-hover: rgba(34, 211, 238, 0.15);
    --module-cyan-subtle: rgba(34, 211, 238, 0.08);
    --module-cyan-border: rgba(34, 211, 238, 0.3);
    --module-cyan-glow: rgba(34, 211, 238, 0.2);

    /* Status Colors (Semantic) */
    --status-success: #34c759;
    --status-success-bg: rgba(52, 199, 89, 0.15);
    --status-warning: #ffcc00;
    --status-warning-bg: rgba(255, 204, 0, 0.15);
    --status-error: #ff453a;
    --status-error-bg: rgba(255, 69, 58, 0.15);
    --status-info: #8ab4f8;
    --status-info-bg: rgba(138, 180, 248, 0.15);

    /* Data Visualization Colors */
    --data-positive: #81c995;
    --data-negative: #f28b82;
    --data-warning: #fdd663;
    --data-highlight: #fbbf24;
    --data-neutral: #9aa0a6;
    --data-info: #8ab4f8;

    /* Accent Aliases (backward compat with admin_dashboard.css) */
    --accent-primary: var(--synapse-cyan);
    --accent-primary-bright: var(--synapse-cyan-hover);
    --accent-primary-glow: rgba(138, 180, 248, 0.12);
    --accent-secondary: #669df6;

    /* Module Accent Overrides */
    --affiliate-primary: #10b981;
    --affiliate-secondary: #34d399;
    --affiliate-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);

    /* ==========================================
       TYPOGRAPHY
       Font families and scale
       ========================================== */

    /* Font Families */
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    --font-data: var(--font-body);  /* backward compat alias for admin_dashboard.css */

    /* Font Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Font Sizes - Modular Scale (1.2 ratio) */
    --text-xs: 11px;       /* Micro labels, badges */
    --text-sm: 13px;       /* Secondary text, captions */
    --text-base: 16px;     /* Body text default (16px prevents iOS auto-zoom on input focus) */
    --text-md: 17px;       /* Emphasized body text */
    --text-lg: 19px;       /* Card headings */
    --text-xl: 24px;       /* Section titles */
    --text-2xl: 28px;      /* Page titles */
    --text-3xl: 34px;      /* Hero sections */
    --text-4xl: 48px;      /* Large hero text */

    /* Line Heights */
    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.15em;

    /* ==========================================
       TEXT COLORS
       ========================================== */
    --text-primary: #e7e9ea;          /* Main content text */
    --text-secondary: #8b98a5;        /* Supporting text */
    --text-muted: #6e767d;            /* De-emphasized text */
    --text-tertiary: #6e7681;         /* Tertiary text, between secondary and muted */
    --text-inverse: #15202b;          /* Text on light backgrounds */
    --text-link: var(--synapse-cyan); /* Links */
    --text-link-hover: var(--synapse-cyan-hover);

    /* ==========================================
       SPACING SCALE
       Consistent spacing tokens
       ========================================== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* ==========================================
       BORDER RADIUS
       ========================================== */
    --radius-sm: 4px;      /* Small elements, badges */
    --radius-md: 8px;      /* Buttons, inputs */
    --radius-lg: 12px;     /* Cards, panels */
    --radius-xl: 16px;     /* Modals, large cards */
    --radius-full: 9999px; /* Pills, avatars */

    /* ==========================================
       SHADOWS
       ========================================== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.3);
    --shadow-glow-cyan: 0 0 20px var(--synapse-cyan-glow);
    --shadow-glow-lg: 0 0 40px var(--synapse-cyan-glow);

    /* ==========================================
       TRANSITIONS & ANIMATIONS
       ========================================== */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: var(--ease-default);  /* backward compat alias for admin_dashboard.css */

    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    --transition-fast: all var(--duration-fast) var(--ease-default);
    --transition-normal: all var(--duration-normal) var(--ease-default);
    --transition-slow: all var(--duration-slow) var(--ease-default);

    /* ==========================================
       Z-INDEX SCALE
       ========================================== */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-toast: 700;
}

/* ==========================================
   GOOGLE FONTS
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

/* ==========================================
   BASE RESET
   ========================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--neural-void);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--text-link-hover);
}

code, pre, kbd, samp {
    font-family: var(--font-mono);
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--synapse-emerald); }
.text-warning { color: var(--synapse-amber); }
.text-error { color: var(--synapse-rose); }
.text-accent { color: var(--synapse-cyan); }

/* Background Colors */
.bg-void { background-color: var(--neural-void); }
.bg-deep { background-color: var(--neural-deep); }
.bg-surface { background-color: var(--neural-surface); }
.bg-elevated { background-color: var(--neural-elevated); }

/* Font Sizes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* Font Weights */
.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }

/* Spacing */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ==========================================
   COMMON COMPONENTS
   ========================================== */

/* Standard Card */
.ng-card {
    background: var(--neural-surface);
    border: 1px solid var(--neural-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: var(--transition-normal);
}

.ng-card:hover {
    border-color: var(--synapse-cyan-muted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Primary Button */
.ng-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    background: linear-gradient(135deg, var(--synapse-cyan), var(--synapse-teal));
    color: var(--neural-void);
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-glow-cyan);
}

.ng-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-lg);
    filter: brightness(1.1);
    color: var(--neural-void);
}

/* Outline Button */
.ng-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    border: 1px solid var(--neural-border-accent);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-normal);
}

.ng-btn-outline:hover {
    background: var(--synapse-cyan-muted);
    border-color: var(--synapse-cyan);
    color: var(--synapse-cyan);
}

/* Badge */
.ng-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.ng-badge-success {
    background: var(--status-success-bg);
    color: var(--synapse-emerald);
}

.ng-badge-warning {
    background: var(--status-warning-bg);
    color: var(--synapse-amber);
}

.ng-badge-error {
    background: var(--status-error-bg);
    color: var(--synapse-rose);
}

.ng-badge-info {
    background: var(--status-info-bg);
    color: var(--synapse-cyan);
}

/* Input Field */
.ng-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--neural-deep);
    border: 1px solid var(--neural-border);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.ng-input:focus {
    outline: none;
    border-color: var(--synapse-cyan);
    box-shadow: 0 0 0 3px var(--synapse-cyan-muted);
}

.ng-input::placeholder {
    color: var(--text-muted);
}

/* ==========================================
   HEADER STYLES
   Standard header for public pages
   ========================================== */
.ng-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(15, 20, 25, 0.98);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--neural-border);
}

.ng-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-5);
}

.ng-logo {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 22px;
    color: white;
    letter-spacing: var(--tracking-tight);
    transition: var(--transition-fast);
}

.ng-logo:hover {
    transform: translateX(-2px);
    color: white;
}

.ng-logo-accent {
    color: var(--synapse-cyan);
    text-shadow: 0 0 20px var(--synapse-cyan-glow);
}

.ng-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ng-nav-link {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-primary);
    opacity: 0.85;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.ng-nav-link:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.ng-nav-link.active {
    opacity: 1;
    background: var(--synapse-cyan-muted);
    color: var(--synapse-cyan);
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--synapse-cyan);
    outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}