/**
 * MenteUp - Design Tokens
 * Identidade visual moderna, limpa, refinada e focada em aprendizagem cognitiva.
 */

:root {
  /* Marca e Cores Acadêmicas Primárias (Oxford Indigo & Violeta Editorial) */
  --primary-50: #f5f3fc;
  --primary-100: #ece8fa;
  --primary-200: #ddd4f7;
  --primary-300: #c5b6f1;
  --primary-400: #9e87e6;
  --primary-500: #7b5fdb;
  --primary-600: #5d42c3;
  --primary-700: #4933a3;
  --primary-800: #38277f;
  --primary-900: #241957;
  --primary: var(--primary-700);
  --primary-hover: var(--primary-800);
  --primary-active: var(--primary-900);
  --primary-surface: var(--primary-50);
  --primary-border: #dfd8f7;

  /* Cor Complementar & Prestígio (Âmbar Acadêmico e Latão) */
  --amber-50: #fefbf2;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-500: #d97706;
  --amber-600: #b45309;
  --amber-700: #92400e;
  --amber-surface: #fffbeb;
  --amber-border: #fde68a;

  /* Cor Secundária (Azul Intelectual Profundo) */
  --accent-50: #f0f5fc;
  --accent-100: #e0ecf9;
  --accent-200: #b9d7f4;
  --accent-500: #2563eb;
  --accent-600: #1d4ed8;
  --accent-700: #1e40af;
  --accent: var(--accent-600);
  --accent-surface: var(--accent-50);
  --accent-border: #d4e4f7;

  /* Cores de Feedback Cognitivo */
  --success-50: #f2fbf6;
  --success-500: #16a34a;
  --success-600: #15803d;
  --success-border: #bbf7d0;

  --warning-50: #fffbeb;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-border: #fef08a;

  --danger-50: #fdf2f2;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-border: #fecaca;

  /* Superfícies Neutras Quentes (Papel Prensado, Alabastro e Linho - Tema Claro Padrão) */
  --bg-page: #faf9f6;
  --bg-surface: #ffffff;
  --bg-subtle: #f3f0e8;
  --bg-muted: #e7e3d8;
  --bg-hover: #f7f5ed;
  --topbar-bg: rgba(255, 255, 255, 0.88);
  --card-gradient: linear-gradient(135deg, #ffffff, #faf9f6);

  /* Superfície Escura Acadêmica (Auditório & Leitura Noturna) */
  --dark-surface: #141722;
  --dark-surface-card: #1c202f;
  --dark-border: rgba(255, 255, 255, 0.1);
  --dark-text: #f3f4f8;
  --dark-text-muted: #9fa7be;

  /* Tipografia & Contraste */
  --text-main: #17181c;
  --text-secondary: #3c3e47;
  --text-muted: #676a77;
  --text-subtle: #9699a6;
  --text-inverse: #ffffff;

  /* Bordas Suaves e Deliberadas */
  --border-light: #f5f2ea;
  --border-subtle: #e6e2d6;
  --border-medium: #d1cbc0;
  --border-focus: var(--primary-600);

  /* Sombras Discretas e Físicas */
  --shadow-xs: 0 1px 2px 0 rgba(23, 24, 28, 0.04);
  --shadow-sm: 0 2px 4px 0 rgba(23, 24, 28, 0.05), 0 1px 2px -1px rgba(23, 24, 28, 0.03);
  --shadow-md: 0 4px 10px -1px rgba(23, 24, 28, 0.07), 0 2px 5px -2px rgba(23, 24, 28, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(23, 24, 28, 0.08), 0 4px 8px -3px rgba(23, 24, 28, 0.03);
  --shadow-elevated: 0 24px 38px -8px rgba(23, 24, 28, 0.1), 0 10px 16px -6px rgba(23, 24, 28, 0.04);
  --shadow-glow-primary: 0 0 0 3px rgba(73, 51, 163, 0.16);

  /* Raio de Arredondamento */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Tipografia Humana & Editorial */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-sans-heading: 'Plus Jakarta Sans', var(--font-family-base);
  --font-family-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;

  /* Escala de Espaçamento */
  --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;

  /* Transições e Microinterações */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Constantes */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 76px;
  --topbar-height: 64px;
  --content-max-width: 1240px;
}

/* ==========================================================================
   TEMA NOTURNO GRAFITE: Fundo Cinza com tons de Preto (Dark Slate Muted)
   Conforto visual extremo para longas sessões de leitura sem cansar a visão.
   ========================================================================== */
html[data-theme="gray"] {
  --theme-name: 'gray';
  --bg-page: #171923; /* Cinza escuro grafite acolhedor */
  --bg-surface: #222634; /* Cartões e blocos em cinza grafite */
  --bg-subtle: #1c202c; /* Superfície secundária em tom preto-acinzentado */
  --bg-muted: #2d3345;
  --bg-hover: #292f3f;
  --topbar-bg: rgba(34, 38, 52, 0.90);
  --card-gradient: linear-gradient(135deg, #222634, #1a1d28);

  --text-main: #f8fafc; /* Branco suave de altíssimo contraste */
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --text-inverse: #0f172a;

  --border-light: rgba(255, 255, 255, 0.07);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-medium: rgba(255, 255, 255, 0.20);
  --border-focus: #8b5cf6;

  --primary-50: rgba(123, 95, 219, 0.16);
  --primary-100: rgba(123, 95, 219, 0.26);
  --primary-200: rgba(123, 95, 219, 0.38);
  --primary-surface: rgba(123, 95, 219, 0.20);
  --primary-border: rgba(139, 92, 246, 0.40);
  --primary: #9e87e6;
  --primary-hover: #b4a0f0;
  --primary-active: #c5b6f1;

  --amber-surface: rgba(217, 119, 6, 0.20);
  --amber-border: rgba(245, 158, 11, 0.35);
  --amber-50: rgba(245, 158, 11, 0.15);
  --amber-700: #fbbf24;

  --accent-surface: rgba(37, 99, 235, 0.20);
  --accent-border: rgba(59, 130, 246, 0.35);
  --accent-50: rgba(37, 99, 235, 0.15);
  --accent: #60a5fa;

  --success-50: rgba(22, 163, 74, 0.16);
  --success-border: rgba(34, 197, 94, 0.35);
  --danger-50: rgba(239, 68, 68, 0.16);
  --danger-border: rgba(239, 68, 68, 0.35);
  --warning-50: rgba(245, 158, 11, 0.16);
  --warning-border: rgba(245, 158, 11, 0.35);

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 10px -1px rgba(0, 0, 0, 0.5), 0 2px 5px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -3px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 24px 38px -8px rgba(0, 0, 0, 0.7), 0 10px 16px -6px rgba(0, 0, 0, 0.5);
  --shadow-glow-primary: 0 0 0 3px rgba(139, 92, 246, 0.28);
}

/* ==========================================================================
   TEMA NOTURNO PURO: Fundo Preto Profundo (OLED Midnight)
   Preto 100% puro para telas OLED, economia de energia e contraste cirúrgico.
   ========================================================================== */
html[data-theme="black"] {
  --theme-name: 'black';
  --bg-page: #000000; /* Preto 100% OLED */
  --bg-surface: #0e0f14; /* Cartões em tom carvão nobre */
  --bg-subtle: #14161f;
  --bg-muted: #1e212d;
  --bg-hover: #191b26;
  --topbar-bg: rgba(14, 15, 20, 0.94);
  --card-gradient: linear-gradient(135deg, #0e0f14, #08090d);

  --text-main: #ffffff; /* Branco absoluto */
  --text-secondary: #e2e8f0;
  --text-muted: #9ca3af;
  --text-subtle: #6b7280;
  --text-inverse: #000000;

  --border-light: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.16);
  --border-medium: rgba(255, 255, 255, 0.26);
  --border-focus: #a78bfa;

  --primary-50: rgba(139, 92, 246, 0.18);
  --primary-100: rgba(139, 92, 246, 0.28);
  --primary-200: rgba(139, 92, 246, 0.42);
  --primary-surface: rgba(139, 92, 246, 0.24);
  --primary-border: rgba(167, 139, 250, 0.45);
  --primary: #a78bfa;
  --primary-hover: #c4b5fd;
  --primary-active: #ddd6fe;

  --amber-surface: rgba(245, 158, 11, 0.22);
  --amber-border: rgba(251, 191, 36, 0.4);
  --amber-50: rgba(245, 158, 11, 0.16);
  --amber-700: #fcd34d;

  --accent-surface: rgba(59, 130, 246, 0.22);
  --accent-border: rgba(96, 165, 250, 0.4);
  --accent-50: rgba(59, 130, 246, 0.16);
  --accent: #93c5fd;

  --success-50: rgba(34, 197, 94, 0.20);
  --success-border: rgba(74, 222, 128, 0.4);
  --danger-50: rgba(239, 68, 68, 0.20);
  --danger-border: rgba(248, 113, 113, 0.4);
  --warning-50: rgba(245, 158, 11, 0.20);
  --warning-border: rgba(251, 191, 36, 0.4);

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.7), 0 1px 2px -1px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 10px -1px rgba(0, 0, 0, 0.8), 0 2px 5px -2px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.9), 0 4px 8px -3px rgba(0, 0, 0, 0.7);
  --shadow-elevated: 0 24px 38px -8px rgba(0, 0, 0, 0.95), 0 10px 16px -6px rgba(0, 0, 0, 0.8);
  --shadow-glow-primary: 0 0 0 3px rgba(167, 139, 250, 0.35);
}

/* ==========================================================================
   Densidade de Tipografia & Tamanho de Fonte
   ========================================================================== */
html[data-font-size="compact"] {
  font-size: 14px;
}
html[data-font-size="normal"] {
  font-size: 16px;
}
html[data-font-size="large"] {
  font-size: 18px;
}