/* ==========================================================================
   CogniMeet - Design Tokens & Variables
   Paleta Suave: Foco, Clareza Mental & Acolhimento
   ========================================================================== */

:root {
  /* Paleta Base Oficial (Modo Claro - Soft Cloud) */
  --bg-main: #F7F9FC;            /* Soft Cloud - 60% Espaço Negativo */
  --bg-surface-1: #FFFFFF;       /* Branco Puro para Cards e Painéis */
  --bg-surface-2: #F1F4F9;       /* Soft Cloud Escurecido para Hover e Inputs */
  --bg-surface-3: #E8EDF5;       /* Superfície Terciária */
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-subtle: #F8FAFC;
  --bg-glass: rgba(247, 249, 252, 0.85);

  /* Cores Principais da Marca */
  --primary: #4A7C7A;            /* Sage Serene - 30% Estrutura & Ações Principais */
  --primary-hover: #3B6462;
  --primary-light: rgba(74, 124, 122, 0.12);
  --primary-glow: rgba(74, 124, 122, 0.25);

  --secondary: #9B8AA9;          /* Dusty Lilac - 10% IA & Destaques Secundários */
  --secondary-hover: #867495;
  --secondary-light: rgba(155, 138, 169, 0.15);
  --secondary-glow: rgba(155, 138, 169, 0.25);

  --accent-sand: #E8DFD8;        /* Warm Sand - Bordas, Divisores & Apoio */
  --accent-sand-light: rgba(232, 223, 216, 0.4);
  --border-color: #E8DFD8;
  --border-subtle: rgba(232, 223, 216, 0.8);
  --border-medium: #D9CFC7;
  --border-bright: #4A7C7A;

  /* Tipografia & Textos */
  --text-main: #2D3748;          /* Deep Slate - Alto contraste e leitura confortável */
  --text-muted: #718096;         /* Muted Grey - Legendas, Timestamps e Subtítulos */
  --text-dim: #A0AEC0;           /* Ícones inativos e metadados discretos */
  --text-inverse: #FFFFFF;

  /* Feedback Visual em Tons Pastéis Suaves */
  --feedback-success-bg: #D1E7DD;
  --feedback-success-text: #1A5336;
  --feedback-success-border: #BADBCC;

  --feedback-alert-bg: #F8D7DA;
  --feedback-alert-text: #721C24;
  --feedback-alert-border: #F5C2C7;

  --feedback-info-bg: #E9E3ED;
  --feedback-info-text: #5A496B;
  --feedback-info-border: #DCD3E2;

  --feedback-warning-bg: #FFF3CD;
  --feedback-warning-text: #664D03;
  --feedback-warning-border: #FFE69C;

  /* Gradientes Suaves */
  --grad-primary: linear-gradient(135deg, #4A7C7A 0%, #3B6462 100%);
  --grad-sage-lilac: linear-gradient(135deg, #4A7C7A 0%, #9B8AA9 100%);
  --grad-soft-ambient: radial-gradient(circle, rgba(74, 124, 122, 0.08) 0%, rgba(155, 138, 169, 0.05) 50%, transparent 70%);
  --grad-text: linear-gradient(180deg, #2D3748 30%, #4A7C7A 100%);
  --grad-card-border: linear-gradient(135deg, #E8DFD8 0%, rgba(74, 124, 122, 0.3) 50%, #E8DFD8 100%);

  /* Sombras Confortáveis e Acolhedoras */
  --shadow-sm: 0 2px 8px rgba(45, 55, 72, 0.04);
  --shadow-md: 0 8px 24px rgba(45, 55, 72, 0.06), 0 2px 6px rgba(45, 55, 72, 0.03);
  --shadow-lg: 0 16px 40px rgba(45, 55, 72, 0.08), 0 4px 12px rgba(45, 55, 72, 0.04);
  --shadow-card: 0 10px 30px rgba(45, 55, 72, 0.05);

  /* Bordas Arredondadas Orgânicas */
  --border-radius-sm: 8px;
  --border-radius-md: 14px;
  --border-radius-lg: 20px;
  --border-radius-xl: 28px;
  --border-radius-full: 9999px;

  /* Fontes */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Inconsolata', monospace;

  /* Transições */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Container */
  --container-max-width: 1280px;
  --container-padding: 24px;
}

/* ==========================================================================
   Modo Escuro Suave (Soft Dark Mode - Deep Slate Blue #1A202C)
   ========================================================================== */
[data-theme="dark"],
html.dark {
  --bg-main: #1A202C;            /* Cinza-azulado profundo no lugar de preto puro */
  --bg-surface-1: #232B3B;       /* Superfície de cartões escuros */
  --bg-surface-2: #2D3748;       /* Hover e elementos secundários */
  --bg-surface-3: #39455B;       /* Terciário */
  --bg-card: rgba(35, 43, 59, 0.9);
  --bg-card-subtle: #202735;
  --bg-glass: rgba(26, 32, 44, 0.85);

  --primary: #609A98;            /* Sage Suavizado para fundo escuro */
  --primary-hover: #72ACA9;
  --primary-light: rgba(96, 154, 152, 0.15);
  --primary-glow: rgba(96, 154, 152, 0.3);

  --secondary: #B2A3C0;          /* Lilás Suavizado */
  --secondary-hover: #C5B8D1;
  --secondary-light: rgba(178, 163, 192, 0.18);
  --secondary-glow: rgba(178, 163, 192, 0.3);

  --accent-sand: rgba(232, 223, 216, 0.2);
  --border-color: rgba(232, 223, 216, 0.15);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-bright: #609A98;

  --text-main: #F7FAFC;          /* Texto claro confortável */
  --text-muted: #CBD5E1;         /* Muted suave */
  --text-dim: #8B9BB4;
  --text-inverse: #1A202C;

  /* Pastéis Adaptados para Dark Mode */
  --feedback-success-bg: rgba(74, 124, 122, 0.25);
  --feedback-success-text: #8BE0D6;
  --feedback-success-border: rgba(74, 124, 122, 0.4);

  --feedback-alert-bg: rgba(180, 70, 85, 0.25);
  --feedback-alert-text: #FFB8C2;
  --feedback-alert-border: rgba(180, 70, 85, 0.4);

  --feedback-info-bg: rgba(155, 138, 169, 0.25);
  --feedback-info-text: #DDD3E6;
  --feedback-info-border: rgba(155, 138, 169, 0.4);

  --grad-primary: linear-gradient(135deg, #609A98 0%, #4A7C7A 100%);
  --grad-sage-lilac: linear-gradient(135deg, #609A98 0%, #B2A3C0 100%);
  --grad-soft-ambient: radial-gradient(circle, rgba(96, 154, 152, 0.15) 0%, rgba(178, 163, 192, 0.1) 50%, transparent 70%);
  --grad-text: linear-gradient(180deg, #FFFFFF 40%, #CBD5E1 100%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
}