/* Je4nDev Mission Control v5 — Design Tokens (Premium Edition) */
:root {
    /* Premium canonical layer — base compartilhada por MC v6, Kanban, Project Factory e modais. */
    --premium-bg-canvas: #05070d;
    --premium-bg-shell: #080b12;
    --premium-surface-1: rgba(12, 17, 29, 0.92);
    --premium-surface-2: rgba(15, 23, 42, 0.86);
    --premium-surface-3: rgba(30, 41, 59, 0.62);
    --premium-surface-hover: rgba(56, 189, 248, 0.075);
    --premium-surface-danger: rgba(244, 63, 94, 0.12);
    --premium-surface-warning: rgba(245, 158, 11, 0.11);
    --premium-surface-success: rgba(16, 185, 129, 0.10);
    --premium-border-subtle: rgba(148, 163, 184, 0.10);
    --premium-border: rgba(148, 163, 184, 0.16);
    --premium-border-strong: rgba(203, 213, 225, 0.24);
    --premium-border-accent: rgba(56, 189, 248, 0.34);
    --premium-border-danger: rgba(251, 113, 133, 0.42);
    --premium-border-warning: rgba(251, 191, 36, 0.36);
    --premium-text-strong: #f8fafc;
    --premium-text: #e2e8f0;
    --premium-text-muted: #a7b2c7;
    --premium-text-faint: #728096;
    --premium-text-disabled: #536176;
    --premium-text-on-accent: #02111b;
    --premium-accent: #38bdf8;
    --premium-accent-strong: #67e8f9;
    --premium-violet: #a78bfa;
    --premium-success: #34d399;
    --premium-warning: #fbbf24;
    --premium-danger: #fb7185;
    --premium-info: #60a5fa;
    --premium-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --premium-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    --premium-radius-control: 0.75rem;
    --premium-radius-card: 1rem;
    --premium-radius-panel: 1.25rem;
    --premium-radius-hero: 1.5rem;
    --premium-radius-pill: 999px;
    --premium-shadow-card: 0 14px 44px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.045);
    --premium-shadow-panel: 0 22px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255,255,255,0.05);
    --premium-focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.22);
    --premium-danger-ring: 0 0 0 3px rgba(251, 113, 133, 0.22);
    /* Brand — Je4nDev (softer, more premium) */
    --brand-primary: #0ea5e9;
    --brand-primary-soft: #38bdf8;
    --brand-secondary: #8b5cf6;
    --brand-accent: #84cc16;
    --brand-glow: rgba(14, 165, 233, 0.12);
    --brand-glow-strong: rgba(14, 165, 233, 0.25);

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    --gradient-card-hover: linear-gradient(135deg, rgba(14,165,233,0.06), rgba(139,92,246,0.06));
    --gradient-border: linear-gradient(135deg, rgba(14,165,233,0.2), transparent 50%, rgba(139,92,246,0.2));
    --gradient-sidebar: linear-gradient(180deg, rgba(17,24,39,0.8) 0%, rgba(10,12,18,0.95) 100%);

    /* Surfaces */
    --bg-primary: #0a0c12;
    --bg-secondary: #111827;
    --bg-tertiary: #1f2937;
    --bg-glass: rgba(17, 24, 39, 0.6);
    --bg-glass-hover: rgba(17, 24, 39, 0.8);
    --bg-elevated: #1e293b;
    --bg-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");

    /* Text */
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-inverse: #0a0c12;
    --text-brand: var(--brand-primary);

    /* Semantic Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-active: rgba(255, 255, 255, 0.15);
    --border-focus: var(--brand-primary);
    --border-brand: rgba(14, 165, 233, 0.3);

    /* Glassmorphism */
    --glass-blur: 20px;
    --glass-bg: rgba(17, 24, 39, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-hover: rgba(17, 24, 39, 0.8);

    /* Typography */
    --font-display: var(--premium-font-sans);
    --font-body: var(--premium-font-sans);
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-hero: 3.5rem;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Spacing (4px base) */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Radii */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows (with brand color tint) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 24px rgba(14, 165, 233, 0.08), 0 0 48px rgba(14, 165, 233, 0.04);
    --shadow-brand: 0 0 20px rgba(14, 165, 233, 0.15), 0 4px 12px rgba(14, 165, 233, 0.1);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-index layers */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;

    /* MC v6 Workspace aliases — camada incremental sem remover tokens v5 */
    --mc-bg-deep: var(--premium-bg-canvas);
    --mc-bg: var(--premium-bg-shell);
    --mc-surface: var(--premium-surface-1);
    --mc-surface-2: var(--premium-surface-2);
    --mc-surface-3: var(--bg-tertiary);
    --mc-accent: var(--premium-accent);
    --mc-accent-strong: var(--premium-accent-strong);
    --mc-accent-2: var(--premium-violet);
    --mc-success: var(--premium-success);
    --mc-warning: var(--premium-warning);
    --mc-danger: var(--premium-danger);
    --mc-info: var(--premium-info);
    --mc-text: var(--premium-text-strong);
    --mc-text-2: var(--premium-text);
    --mc-muted: var(--premium-text-muted);
    --mc-muted-2: var(--premium-text-faint);
    --mc-disabled: var(--premium-text-disabled);
    --mc-border-subtle: var(--premium-border-subtle);
    --mc-border: var(--premium-border);
    --mc-border-strong: var(--premium-border-strong);
    --mc-border-accent: var(--premium-border-accent);
    --mc-border-danger: var(--premium-border-danger);
    --mc-glass: rgba(15, 22, 35, 0.72);
    --mc-glass-strong: rgba(18, 27, 43, 0.88);
    --mc-sidebar-bg: linear-gradient(180deg, rgba(12, 18, 30, 0.96), rgba(7, 10, 16, 0.98));
    --mc-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022));
    --mc-card-bg: linear-gradient(180deg, rgba(255,255,255,0.070), rgba(255,255,255,0.032));
    --mc-card-hover: linear-gradient(135deg, rgba(56,189,248,0.10), rgba(139,92,246,0.08));
    --mc-danger-bg: var(--premium-surface-danger);
    --mc-warning-bg: var(--premium-surface-warning);
    --mc-success-bg: var(--premium-surface-success);
    --mc-font-sans: var(--premium-font-sans);
    --mc-font-display: var(--premium-font-sans);
    --mc-font-mono: var(--premium-font-mono);
    --mc-text-2xs: 0.6875rem;
    --mc-text-xs: var(--text-xs);
    --mc-text-sm: var(--text-sm);
    --mc-text-md: var(--text-base);
    --mc-text-lg: var(--text-lg);
    --mc-text-xl: var(--text-xl);
    --mc-text-2xl: var(--text-2xl);
    --mc-text-3xl: var(--text-3xl);
    --mc-line-tight: var(--leading-tight);
    --mc-line-body: var(--leading-normal);
    --mc-space-1: var(--space-1);
    --mc-space-2: var(--space-2);
    --mc-space-3: var(--space-3);
    --mc-space-4: var(--space-4);
    --mc-space-5: var(--space-5);
    --mc-space-6: var(--space-6);
    --mc-space-8: var(--space-8);
    --mc-space-10: var(--space-10);
    --mc-space-12: var(--space-12);
    --mc-radius-sm: 0.375rem;
    --mc-radius-md: 0.625rem;
    --mc-radius-lg: 0.875rem;
    --mc-radius-xl: var(--radius-xl);
    --mc-radius-2xl: var(--radius-2xl);
    --mc-radius-pill: var(--radius-full);
    --mc-shadow-1: 0 8px 24px rgba(0, 0, 0, 0.22);
    --mc-shadow-2: 0 16px 44px rgba(0, 0, 0, 0.34);
    --mc-shadow-3: 0 24px 70px rgba(0, 0, 0, 0.46);
    --mc-glow-accent: 0 0 28px rgba(56, 189, 248, 0.14);
    --mc-glow-danger: 0 0 28px rgba(244, 63, 94, 0.16);
    --mc-sidebar-w: 264px;
    --mc-sidebar-collapsed-w: 72px;
    --mc-topbar-h: 58px;
    --mc-console-w: minmax(340px, 420px);
    --mc-content-max: 1440px;
    --mc-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --mc-fast: 150ms var(--mc-ease);
    --mc-normal: 240ms var(--mc-ease);
    --mc-slow: 420ms var(--mc-ease);

    /* Sidebar */
    --sidebar-width: 240px;
    --sidebar-collapsed: 64px;

    /* Page transitions */
    --page-enter: fadeSlideIn 0.3s ease both;
    --page-exit: fadeSlideOut 0.15s ease both;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-4px); }
}

/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');