/**
 * Nexus Global Design System
 * Microsoft Fluent Design Tokens
 *
 * All module CSS must consume these variables exclusively.
 * No hardcoded color, font, spacing, shadow, or radius values in module CSS.
 *
 * @package Nexus
 * @since   1.0.0
 */

:root {
    /* ── Typography ────────────────────────────────────────── */
    --nexus-font-primary: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --nexus-font-secondary: 'Segoe UI Semibold', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --nexus-font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    --nexus-font-size-xs: 0.75rem;
    --nexus-font-size-sm: 0.8125rem;
    --nexus-font-size-base: 0.875rem;
    --nexus-font-size-md: 1rem;
    --nexus-font-size-lg: 1.25rem;
    --nexus-font-size-xl: 1.5rem;
    --nexus-font-size-2xl: 2rem;
    --nexus-font-weight-regular: 400;
    --nexus-font-weight-semibold: 600;
    --nexus-font-weight-bold: 700;
    --nexus-line-height-tight: 1.25;
    --nexus-line-height-normal: 1.5;

    /* ── Colors ─────────────────────────────────────────────── */
    --nexus-color-background: #f5f5f5;
    --nexus-color-surface: #ffffff;
    --nexus-color-surface-secondary: #fafafa;
    --nexus-color-accent: #0078d4;
    --nexus-color-accent-hover: #106ebe;
    --nexus-color-accent-active: #005a9e;
    --nexus-color-accent-light: rgba(0, 120, 212, 0.08);
    --nexus-color-text-primary: #242424;
    --nexus-color-text-secondary: #616161;
    --nexus-color-text-tertiary: #8a8a8a;
    --nexus-color-text-on-accent: #ffffff;
    --nexus-color-border: #e0e0e0;
    --nexus-color-border-strong: #d1d1d1;
    --nexus-color-divider: #f0f0f0;

    /* ── Status Colors ──────────────────────────────────────── */
    --nexus-color-success: #107c10;
    --nexus-color-success-bg: rgba(16, 124, 16, 0.08);
    --nexus-color-warning: #ffb900;
    --nexus-color-warning-bg: rgba(255, 185, 0, 0.08);
    --nexus-color-danger: #d13438;
    --nexus-color-danger-hover: #a4262c;
    --nexus-color-danger-bg: rgba(209, 52, 56, 0.08);
    --nexus-color-info: #0078d4;
    --nexus-color-info-bg: rgba(0, 120, 212, 0.08);

    /* ── Border Radius ──────────────────────────────────────── */
    --nexus-radius-xs: 2px;
    --nexus-radius-sm: 4px;
    --nexus-radius-md: 6px;
    --nexus-radius-lg: 8px;
    --nexus-radius-xl: 12px;
    --nexus-radius-full: 9999px;

    /* ── Shadows (Fluent Elevation) ─────────────────────────── */
    --nexus-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --nexus-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --nexus-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --nexus-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.14);
    --nexus-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.18);

    /* ── Spacing ────────────────────────────────────────────── */
    --nexus-spacing-xxs: 2px;
    --nexus-spacing-xs: 4px;
    --nexus-spacing-sm: 8px;
    --nexus-spacing-md: 16px;
    --nexus-spacing-lg: 24px;
    --nexus-spacing-xl: 32px;
    --nexus-spacing-2xl: 48px;
    --nexus-spacing-3xl: 64px;

    /* ── Transitions ────────────────────────────────────────── */
    --nexus-transition-fast: 0.1s ease;
    --nexus-transition-normal: 0.2s ease;
    --nexus-transition-slow: 0.3s ease;

    /* ── Layout ─────────────────────────────────────────────── */
    --nexus-container-sm: 640px;
    --nexus-container-md: 768px;
    --nexus-container-lg: 1024px;
    --nexus-container-xl: 1280px;

    /* ── Z-Index Scale ──────────────────────────────────────── */
    --nexus-z-dropdown: 100;
    --nexus-z-sticky: 200;
    --nexus-z-overlay: 300;
    --nexus-z-modal: 400;
    --nexus-z-toast: 500;
}

/* ═══════════════════════════════════════════════════════════════
   BASE RESET & UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.nexus-wrap,
.nexus-wrap *,
.nexus-wrap *::before,
.nexus-wrap *::after {
    box-sizing: border-box;
}

.nexus-wrap {
    font-family: var(--nexus-font-primary);
    font-size: var(--nexus-font-size-base);
    line-height: var(--nexus-line-height-normal);
    color: var(--nexus-color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Fluent Button Base ─────────────────────────────────────── */

.nexus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nexus-spacing-sm);
    padding: var(--nexus-spacing-sm) var(--nexus-spacing-md);
    font-family: var(--nexus-font-primary);
    font-size: var(--nexus-font-size-base);
    font-weight: var(--nexus-font-weight-semibold);
    line-height: var(--nexus-line-height-tight);
    border: 1px solid var(--nexus-color-border);
    border-radius: var(--nexus-radius-md);
    background: var(--nexus-color-surface);
    color: var(--nexus-color-text-primary);
    cursor: pointer;
    transition: all var(--nexus-transition-fast);
    text-decoration: none;
    white-space: nowrap;
    min-height: 32px;
}

.nexus-btn:hover {
    background: var(--nexus-color-surface-secondary);
    border-color: var(--nexus-color-border-strong);
}

.nexus-btn:active {
    background: var(--nexus-color-divider);
}

.nexus-btn:focus-visible {
    outline: 2px solid var(--nexus-color-accent);
    outline-offset: 1px;
}

.nexus-btn--primary {
    background: var(--nexus-color-accent);
    border-color: var(--nexus-color-accent);
    color: var(--nexus-color-text-on-accent);
}

.nexus-btn--primary:hover {
    background: var(--nexus-color-accent-hover);
    border-color: var(--nexus-color-accent-hover);
    color: var(--nexus-color-text-on-accent);
}

.nexus-btn--primary:active {
    background: var(--nexus-color-accent-active);
    border-color: var(--nexus-color-accent-active);
}

.nexus-btn--danger {
    background: var(--nexus-color-danger);
    border-color: var(--nexus-color-danger);
    color: var(--nexus-color-text-on-accent);
}

.nexus-btn--danger:hover {
    background: var(--nexus-color-danger-hover);
    border-color: var(--nexus-color-danger-hover);
    color: var(--nexus-color-text-on-accent);
}

.nexus-btn--sm {
    padding: var(--nexus-spacing-xs) var(--nexus-spacing-sm);
    font-size: var(--nexus-font-size-sm);
    min-height: 28px;
}

.nexus-btn--lg {
    padding: var(--nexus-spacing-md) var(--nexus-spacing-lg);
    font-size: var(--nexus-font-size-md);
    min-height: 40px;
}

.nexus-btn--block {
    width: 100%;
}

.nexus-btn:disabled,
.nexus-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Fluent Card ────────────────────────────────────────────── */

.nexus-card {
    background: var(--nexus-color-surface);
    border: 1px solid var(--nexus-color-border);
    border-radius: var(--nexus-radius-lg);
    box-shadow: var(--nexus-shadow-sm);
    padding: var(--nexus-spacing-lg);
    transition: box-shadow var(--nexus-transition-normal);
}

.nexus-card:hover {
    box-shadow: var(--nexus-shadow-md);
}

.nexus-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--nexus-spacing-md);
    margin-bottom: var(--nexus-spacing-md);
    border-bottom: 1px solid var(--nexus-color-divider);
}

.nexus-card__title {
    font-family: var(--nexus-font-secondary);
    font-size: var(--nexus-font-size-lg);
    font-weight: var(--nexus-font-weight-semibold);
    color: var(--nexus-color-text-primary);
    margin: 0;
}

/* ── Fluent Form Controls ───────────────────────────────────── */

.nexus-input,
.nexus-select,
.nexus-textarea {
    display: block;
    width: 100%;
    padding: var(--nexus-spacing-sm) var(--nexus-spacing-md);
    font-family: var(--nexus-font-primary);
    font-size: var(--nexus-font-size-base);
    line-height: var(--nexus-line-height-normal);
    color: var(--nexus-color-text-primary);
    background: var(--nexus-color-surface);
    border: 1px solid var(--nexus-color-border);
    border-radius: var(--nexus-radius-md);
    transition: border-color var(--nexus-transition-fast), box-shadow var(--nexus-transition-fast);
    outline: none;
    min-height: 36px;
}

.nexus-input:focus,
.nexus-select:focus,
.nexus-textarea:focus {
    border-color: var(--nexus-color-accent);
    box-shadow: 0 0 0 1px var(--nexus-color-accent);
}

.nexus-input::placeholder,
.nexus-textarea::placeholder {
    color: var(--nexus-color-text-tertiary);
}

.nexus-textarea {
    resize: vertical;
    min-height: 80px;
}

.nexus-label {
    display: block;
    font-family: var(--nexus-font-primary);
    font-size: var(--nexus-font-size-base);
    font-weight: var(--nexus-font-weight-semibold);
    color: var(--nexus-color-text-primary);
    margin-bottom: var(--nexus-spacing-xs);
}

.nexus-label--required::after {
    content: ' *';
    color: var(--nexus-color-danger);
}

.nexus-form-group {
    margin-bottom: var(--nexus-spacing-md);
}

.nexus-form-hint {
    display: block;
    font-size: var(--nexus-font-size-sm);
    color: var(--nexus-color-text-secondary);
    margin-top: var(--nexus-spacing-xs);
}

.nexus-form-error {
    display: block;
    font-size: var(--nexus-font-size-sm);
    color: var(--nexus-color-danger);
    margin-top: var(--nexus-spacing-xs);
}

/* ── Fluent Tabs ────────────────────────────────────────────── */

.nexus-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--nexus-color-border);
    margin-bottom: var(--nexus-spacing-lg);
}

.nexus-tab {
    padding: var(--nexus-spacing-sm) var(--nexus-spacing-md);
    font-family: var(--nexus-font-primary);
    font-size: var(--nexus-font-size-base);
    font-weight: var(--nexus-font-weight-regular);
    color: var(--nexus-color-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--nexus-transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.nexus-tab:hover {
    color: var(--nexus-color-text-primary);
    background: var(--nexus-color-accent-light);
}

.nexus-tab--active,
.nexus-tab.active {
    color: var(--nexus-color-accent);
    border-bottom-color: var(--nexus-color-accent);
    font-weight: var(--nexus-font-weight-semibold);
}

/* ── Fluent Badge ───────────────────────────────────────────── */

.nexus-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--nexus-spacing-xxs) var(--nexus-spacing-sm);
    font-family: var(--nexus-font-primary);
    font-size: var(--nexus-font-size-xs);
    font-weight: var(--nexus-font-weight-semibold);
    border-radius: var(--nexus-radius-full);
    line-height: var(--nexus-line-height-tight);
}

.nexus-badge--success {
    background: var(--nexus-color-success-bg);
    color: var(--nexus-color-success);
}

.nexus-badge--warning {
    background: var(--nexus-color-warning-bg);
    color: var(--nexus-color-warning);
}

.nexus-badge--danger {
    background: var(--nexus-color-danger-bg);
    color: var(--nexus-color-danger);
}

.nexus-badge--info {
    background: var(--nexus-color-info-bg);
    color: var(--nexus-color-info);
}

/* ── Fluent Toggle ──────────────────────────────────────────── */

.nexus-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nexus-spacing-sm);
    cursor: pointer;
}

.nexus-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nexus-toggle__slider {
    position: relative;
    width: 40px;
    height: 20px;
    background: var(--nexus-color-border-strong);
    border-radius: var(--nexus-radius-full);
    transition: background var(--nexus-transition-fast);
}

.nexus-toggle__slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--nexus-color-surface);
    border-radius: var(--nexus-radius-full);
    transition: transform var(--nexus-transition-fast);
    box-shadow: var(--nexus-shadow-xs);
}

.nexus-toggle__input:checked + .nexus-toggle__slider {
    background: var(--nexus-color-accent);
}

.nexus-toggle__input:checked + .nexus-toggle__slider::after {
    transform: translateX(20px);
}

.nexus-toggle__input:focus-visible + .nexus-toggle__slider {
    outline: 2px solid var(--nexus-color-accent);
    outline-offset: 2px;
}

/* ── Fluent Alert / Notice ──────────────────────────────────── */

.nexus-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--nexus-spacing-sm);
    padding: var(--nexus-spacing-md);
    border-radius: var(--nexus-radius-md);
    font-size: var(--nexus-font-size-base);
    line-height: var(--nexus-line-height-normal);
    margin-bottom: var(--nexus-spacing-md);
}

.nexus-alert--success {
    background: var(--nexus-color-success-bg);
    color: var(--nexus-color-success);
    border: 1px solid var(--nexus-color-success);
}

.nexus-alert--warning {
    background: var(--nexus-color-warning-bg);
    color: var(--nexus-color-text-primary);
    border: 1px solid var(--nexus-color-warning);
}

.nexus-alert--danger {
    background: var(--nexus-color-danger-bg);
    color: var(--nexus-color-danger);
    border: 1px solid var(--nexus-color-danger);
}

.nexus-alert--info {
    background: var(--nexus-color-info-bg);
    color: var(--nexus-color-info);
    border: 1px solid var(--nexus-color-info);
}

/* ── Grid Utility ───────────────────────────────────────────── */

.nexus-grid {
    display: grid;
    gap: var(--nexus-spacing-md);
}

.nexus-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.nexus-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.nexus-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .nexus-grid--2,
    .nexus-grid--3,
    .nexus-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* ── Fluent Divider ─────────────────────────────────────────── */

.nexus-divider {
    border: none;
    border-top: 1px solid var(--nexus-color-divider);
    margin: var(--nexus-spacing-lg) 0;
}

/* ── Fluent Avatar ──────────────────────────────────────────── */

.nexus-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--nexus-radius-full);
    background: var(--nexus-color-accent-light);
    color: var(--nexus-color-accent);
    font-family: var(--nexus-font-secondary);
    font-size: var(--nexus-font-size-base);
    font-weight: var(--nexus-font-weight-semibold);
    overflow: hidden;
}

.nexus-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nexus-avatar--sm {
    width: 28px;
    height: 28px;
    font-size: var(--nexus-font-size-xs);
}

.nexus-avatar--lg {
    width: 56px;
    height: 56px;
    font-size: var(--nexus-font-size-lg);
}

.nexus-avatar--xl {
    width: 80px;
    height: 80px;
    font-size: var(--nexus-font-size-2xl);
}

/* ── Spinner ────────────────────────────────────────────────── */

.nexus-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--nexus-color-border);
    border-top-color: var(--nexus-color-accent);
    border-radius: var(--nexus-radius-full);
    animation: nexus-spin 0.6s linear infinite;
}

@keyframes nexus-spin {
    to { transform: rotate(360deg); }
}

/* ── Screen Reader Utility ──────────────────────────────────── */

.nexus-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;
}