/* ============================================
   SNAPLINKED DESIGN SYSTEM v4.0 - ENTERPRISE
   ============================================

   Design System profissional inspirado em:
   - LinkedIn, Buffer, Hootsuite, Notion, Linear
   - Glassmorphism sutil e moderno
   - Validado WCAG 2.2 AA

   Atualizado: 25 de Janeiro de 2026
   ============================================ */

:root {
  /* ========================================
     BRAND COLORS - LinkedIn Extended Palette
     ======================================== */

  /* Primary Blue - LinkedIn signature */
  --primary-50: #e8f4fc;
  --primary-100: #cce8f9;
  --primary-200: #99d1f3;
  --primary-300: #66baed;
  --primary-400: #33a3e7;
  --primary-500: #0a66c2;
  --primary-600: #0959a6;
  --primary-700: #074d8a;
  --primary-800: #05406e;
  --primary-900: #043352;

  /* Semantic aliases */
  --primary: var(--primary-500);
  --primary-active: var(--primary-700);
  --primary-subtle: var(--primary-50);
  --primary-light: rgba(10, 102, 194, 0.08);
  --primary-ring: rgba(10, 102, 194, 0.35);

  /* ========================================
     NEUTRALS - Premium Gray Scale
     ======================================== */
  --neutral-0: #ffffff;
  --neutral-25: #fcfcfd;
  --neutral-50: #f8fafc;
  --neutral-100: #f3f2ef; /* LinkedIn Background */
  --neutral-150: #e8eef4;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --neutral-950: #020617;

  /* ========================================
     SURFACE & BACKGROUND TOKENS
     ======================================== */
  --bg-body: var(--neutral-100);
  --bg-surface: var(--neutral-0);
  --bg-surface-elevated: var(--neutral-0);
  --bg-card: var(--neutral-0);
  --bg-hover: var(--neutral-100);
  --bg-active: var(--neutral-150);
  --bg-input: var(--neutral-0);
  --bg-muted: var(--neutral-50);
  --bg-subtle: var(--neutral-100);
  --bg-overlay: rgba(15, 23, 42, 0.6);
  --bg-overlay-light: rgba(15, 23, 42, 0.4);

  /* Glass effects */
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-glass-hover: rgba(255, 255, 255, 0.95);
  --backdrop-blur: blur(12px);
  --backdrop-blur-lg: blur(20px);

  /* ========================================
     TEXT TOKENS - WCAG 2.2 AA Validated
     ======================================== */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-muted: var(--neutral-500);       /* Upgraded from neutral-400 for WCAG AA contrast ≥4.5:1 */
  --text-disabled: var(--neutral-300);
  --text-inverse: var(--neutral-0);
  --text-link: var(--primary-500);
  --text-link-hover: var(--primary-600);

  /* ========================================
     BORDER TOKENS
     ======================================== */
  --border-subtle: var(--neutral-100);
  --border-light: var(--neutral-150);
  --border-default: var(--neutral-200);
  --border-medium: var(--neutral-300);

  /* Compatibility */
  --border-color: var(--border-default);

  /* ========================================
     SEMANTIC COLORS
     ======================================== */

  /* Success */
  --success-50: #ecfdf5;
  --success-100: #d1fae5;
  --success-200: #a7f3d0;
  --success-300: #6ee7b7;
  --success-400: #34d399;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;
  --success-800: #065f46;

  --success: var(--success-500);
  --success-bg: var(--success-50);
  --success-text: var(--success-700);
  --success-ring: rgba(16, 185, 129, 0.35);

  /* Warning */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;

  --warning: var(--warning-500);
  --warning-bg: var(--warning-50);
  --warning-text: var(--warning-700);

  /* Danger */
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;

  --danger: var(--danger-500);
  --danger-bg: var(--danger-50);
  --danger-text: var(--danger-700);
  --danger-ring: rgba(239, 68, 68, 0.35);

  /* Info */
  --info-50: #eff6ff;
  --info-100: #dbeafe;
  --info-200: #bfdbfe;
  --info-400: #60a5fa;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;
  --info-800: #1e40af;

  --info: var(--info-500);
  --info-bg: var(--info-50);
  --info-text: var(--info-700);

  /* ========================================
     POST STATUS TOKENS
     ======================================== */
  --status-draft-bg: var(--neutral-100);
  --status-draft-text: var(--neutral-600);
  --status-draft-border: var(--neutral-200);

  --status-scheduled-bg: var(--primary-50);
  --status-scheduled-text: var(--primary-700);
  --status-scheduled-border: var(--primary-200);

  --status-publishing-bg: var(--warning-50);
  --status-publishing-text: var(--warning-700);
  --status-publishing-border: var(--warning-200);

  --status-published-bg: var(--success-50);
  --status-published-text: var(--success-700);
  --status-published-border: var(--success-200);

  --status-failed-bg: var(--danger-50);
  --status-failed-text: var(--danger-700);
  --status-failed-border: var(--danger-200);

  /* ========================================
     TYPOGRAPHY SYSTEM
     ======================================== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Font Sizes - Modular Scale 1.25 */
  --text-2xs: 0.625rem;   /* 10px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

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

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.025em;

  /* ========================================
     SPACING SYSTEM - 4px Base Grid
     ======================================== */
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.25rem;  /* 20px */
  --radius-full: 9999px;

  /* ========================================
     SHADOWS - Layered System
     ======================================== */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Colored shadows */
  --shadow-primary: 0 4px 14px 0 rgba(10, 102, 194, 0.25);
  --shadow-primary-lg: 0 10px 30px 0 rgba(10, 102, 194, 0.3);
  --shadow-success: 0 4px 14px 0 rgba(16, 185, 129, 0.25);
  --shadow-danger: 0 4px 14px 0 rgba(239, 68, 68, 0.25);

  /* Card shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-card-elevated: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);

  /* ========================================
     TRANSITIONS & ANIMATIONS
     ======================================== */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast: all 150ms var(--ease-in-out);
  --transition-normal: all 200ms var(--ease-in-out);
  --transition-slow: all 300ms var(--ease-in-out);
  --transition-colors: background-color 150ms var(--ease-in-out),
                       border-color 150ms var(--ease-in-out),
                       color 150ms var(--ease-in-out);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-sidebar: 1000;
  --z-modal: 1060;
  --z-tooltip: 1080;
  --z-toast: 1090;
  --z-max: 9999;

  /* ========================================
     LAYOUT TOKENS
     ======================================== */
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 72px;
  --header-height: 64px;
  --content-max-width: 1280px;

  /* ========================================
     FOCUS STATES - Accessibility
     ======================================== */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-outline: var(--focus-ring-width) solid var(--primary);
  --focus-offset: var(--focus-ring-offset);

  /* ========================================
     GRADIENTS
     ======================================== */
  --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  --gradient-surface: linear-gradient(180deg, var(--neutral-0) 0%, var(--neutral-50) 100%);
}

/* ============================================
   DARK MODE - data-bs-theme="dark"
   Bootstrap 5.3 compatible + custom tokens
   ============================================ */

[data-bs-theme="dark"] {
  /* Surfaces & Backgrounds */
  --bg-body: #0f172a;
  --bg-surface: #1e293b;
  --bg-surface-elevated: #334155;
  --bg-card: #1e293b;
  --bg-hover: #334155;
  --bg-active: #475569;
  --bg-input: #1e293b;
  --bg-muted: #0f172a;
  --bg-subtle: #1e293b;
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-overlay-light: rgba(0, 0, 0, 0.5);
  --bg-glass: rgba(30, 41, 59, 0.85);
  --bg-glass-hover: rgba(30, 41, 59, 0.95);

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #94a3b8;
  --text-muted: #94a3b8;
  --text-disabled: #64748b;
  --text-inverse: #0f172a;
  --text-link: var(--primary-300);
  --text-link-hover: var(--primary-400);

  /* Borders */
  --border-subtle: #1e293b;
  --border-light: #334155;
  --border-default: #334155;
  --border-medium: #475569;
  --border-color: var(--border-default);

  /* Semantic BGs (dark-friendly) */
  --success-bg: #064e3b;
  --success-text: #6ee7b7;
  --warning-bg: #78350f;
  --warning-text: #fcd34d;
  --danger-bg: #7f1d1d;
  --danger-text: #fca5a5;
  --info-bg: #1e3a8a;
  --info-text: #93c5fd;

  /* ========================================
     LIGHT PALETTE → DARK EQUIVALENTS
     Corrige ~120 ocorrências que usam -50/-100/-200
     como background e ficavam claríssimos no dark.
     ======================================== */

  /* Primary blue (dark) */
  --primary-50: #0c2d48;
  --primary-100: #0f3a5c;
  --primary-200: #135080;
  --primary-subtle: #0c2d48;

  /* Success green (dark) */
  --success-50: #0a2e21;
  --success-100: #0d3f2d;
  --success-200: #0f5c42;

  /* Warning amber (dark) */
  --warning-50: #2a1d08;
  --warning-100: #3d2b0e;
  --warning-200: #5c4012;

  /* Danger red (dark) */
  --danger-50: #2d1515;
  --danger-100: #431c1c;
  --danger-200: #5c2424;

  /* Info blue (dark) */
  --info-50: #0c1e3d;
  --info-100: #152d5c;
  --info-200: #1d3a75;

  /* Neutral scale (dark) — inverte a escala para fundo escuro */
  --neutral-0: #0f172a;
  --neutral-25: #131c2e;
  --neutral-50: #1e293b;
  --neutral-100: #334155;
  --neutral-150: #3d4f66;
  --neutral-200: #475569;
  --neutral-300: #64748b;
  --neutral-400: #94a3b8;

  /* Status tokens */
  --status-draft-bg: #1e293b;
  --status-draft-text: #94a3b8;
  --status-draft-border: #334155;
  --status-scheduled-bg: #043352;
  --status-scheduled-text: #66baed;
  --status-scheduled-border: #074d8a;
  --status-publishing-bg: #78350f;
  --status-publishing-text: #fcd34d;
  --status-publishing-border: #92400e;
  --status-published-bg: #064e3b;
  --status-published-text: #6ee7b7;
  --status-published-border: #047857;
  --status-failed-bg: #7f1d1d;
  --status-failed-text: #fca5a5;
  --status-failed-border: #991b1b;

  /* Shadows (stronger for dark surfaces) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-card-elevated: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-primary: 0 4px 14px 0 rgba(10, 102, 194, 0.35);
  --shadow-primary-lg: 0 10px 30px 0 rgba(10, 102, 194, 0.4);

  /* Gradients */
  --gradient-surface: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);

  color-scheme: dark;
}

/* Dark mode scrollbar */
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--neutral-600);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-500);
}

/* Dark mode selection */
[data-bs-theme="dark"] ::selection {
  background-color: var(--primary-700);
  color: var(--primary-100);
}

/* ============================================
   BASE RESETS & DEFAULTS
   ============================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-body);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Typography defaults */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

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

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

/* Selection */
::selection {
  background-color: var(--primary-200);
  color: var(--primary-900);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}

/* Utility Classes */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }

.bg-primary { background-color: var(--primary) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.bg-muted { background-color: var(--bg-muted) !important; }

.font-medium { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold { font-weight: var(--font-bold) !important; }

/* ============================================
   LEGACY ALIASES - Inline Template Compatibility
   ============================================
   Aliases para variáveis --li-* usadas em templates
   inline. Permite consolidação gradual sem quebrar
   estilos existentes.
   ============================================ */

:root {
  /* Core LinkedIn aliases */
  --li-blue: var(--primary-500);
  --li-blue-hover: var(--primary-600);
  --li-success: var(--success-700);
}

/* ============================================
   RESPONSIVE BREAKPOINTS REFERENCE
   ============================================
   sm: 640px
   md: 768px
   lg: 1024px
   xl: 1280px
   2xl: 1536px
   ============================================ */