/**
 * SupportPONTO Design System
 * Modern, Corporate, Minimalist Design Tokens
 * Based on company brand identity
 */

:root {
  /* ===================================
   * Cores Principais - da Logo
   * =================================== */
  --sp-primary: #9DB89D;           /* Verde Sage - Cor principal */
  --sp-primary-dark: #5A6B5A;      /* Verde Musgo Escuro - Sidebar, headers */
  --sp-primary-light: #C8DCC8;     /* Verde Menta Claro - Hover, backgrounds */
  
  /* ===================================
   * Cores de Status (harmonizadas)
   * =================================== */
  --sp-success: #7A9E7A;           /* Verde sage mais escuro */
  --sp-success-light: #E8F2E8;
  --sp-danger: #D97676;            /* Vermelho suave compatível */
  --sp-danger-light: #F7E4E4;
  --sp-warning: #E8C474;           /* Amarelo suave compatível */
  --sp-warning-light: #FBF4DD;
  --sp-info: #7BA3C4;              /* Azul suave compatível */
  --sp-info-light: #E4EEF5;
  
  /* ===================================
   * Escala de Cinzas
   * =================================== */
  --sp-gray-50: #FAFAFA;
  --sp-gray-100: #F5F5F5;
  --sp-gray-200: #E5E5E5;          /* Cinza claro da logo */
  --sp-gray-300: #D4D4D4;
  --sp-gray-400: #A3A3A3;
  --sp-gray-500: #737373;
  --sp-gray-600: #6B6B6B;          /* Cinza neutro da logo */
  --sp-gray-700: #5A6B5A;
  --sp-gray-800: #404040;
  --sp-gray-900: #1A1A1A;
  
  /* ===================================
   * Backgrounds
   * =================================== */
  --sp-bg-page: #F8F9FA;           /* Fundo geral */
  --sp-bg-surface: #FFFFFF;        /* Fundo cards/modais */
  --sp-bg-sidebar: #5A6B5A;        /* Sidebar - verde musgo escuro */
  --sp-bg-header: #FFFFFF;
  
  /* ===================================
   * Textos
   * =================================== */
  --sp-text-primary: #1A1A1A;
  --sp-text-secondary: #6B6B6B;
  --sp-text-muted: #A3A3A3;
  --sp-text-white: #FFFFFF;
  
  /* ===================================
   * Bordas e Sombras
   * =================================== */
  --sp-border: #E5E5E5;
  --sp-shadow-sm: 0 1px 3px rgba(90, 107, 90, 0.08);
  --sp-shadow-md: 0 4px 12px rgba(90, 107, 90, 0.12);
  --sp-shadow-lg: 0 8px 24px rgba(90, 107, 90, 0.16);
  
  /* ===================================
   * Raios de Borda
   * =================================== */
  --sp-radius-sm: 8px;
  --sp-radius-md: 12px;
  --sp-radius-lg: 16px;
  --sp-radius-xl: 20px;
  --sp-radius-full: 999px;
  
  /* ===================================
   * Espaçamentos
   * =================================== */
  --sp-space-xs: 0.25rem;  /* 4px */
  --sp-space-sm: 0.5rem;   /* 8px */
  --sp-space-md: 1rem;     /* 16px */
  --sp-space-lg: 1.5rem;   /* 24px */
  --sp-space-xl: 2rem;     /* 32px */
  --sp-space-2xl: 3rem;    /* 48px */
  
  /* ===================================
   * Transições
   * =================================== */
  --sp-transition: all 0.2s ease-in-out;
  
  /* ===================================
   * Tipografia - Fonte Inter
   * =================================== */
  --sp-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Tamanhos de Fonte */
  --sp-font-size-xs: 0.75rem;    /* 12px - textos muito pequenos */
  --sp-font-size-sm: 0.875rem;   /* 14px - textos secundários */
  --sp-font-size-base: 1rem;     /* 16px - corpo */
  --sp-font-size-md: 1.125rem;   /* 18px - subtítulos */
  --sp-font-size-lg: 1.25rem;    /* 20px - títulos pequenos */
  --sp-font-size-xl: 1.5rem;     /* 24px - títulos médios */
  --sp-font-size-2xl: 2rem;      /* 32px - títulos grandes */
  --sp-font-size-3xl: 2.5rem;    /* 40px - hero titles */
  
  /* Pesos de Fonte */
  --sp-font-normal: 400;
  --sp-font-medium: 500;
  --sp-font-semibold: 600;
  --sp-font-bold: 700;
  
  /* Line Heights */
  --sp-line-height-tight: 1.2;
  --sp-line-height-normal: 1.5;
  --sp-line-height-relaxed: 1.75;
  
  /* ===================================
   * Breakpoints (para referência)
   * =================================== */
  --sp-breakpoint-sm: 576px;   /* Smartphones */
  --sp-breakpoint-md: 768px;   /* Tablets */
  --sp-breakpoint-lg: 992px;   /* Desktop pequeno */
  --sp-breakpoint-xl: 1200px;  /* Desktop médio */
  --sp-breakpoint-2xl: 1400px; /* Desktop grande */
}

/* ===================================
 * Base Resets & Global Styles
 * =================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--sp-font-family);
  font-size: var(--sp-font-size-base);
  font-weight: var(--sp-font-normal);
  line-height: var(--sp-line-height-normal);
  color: var(--sp-text-primary);
  background: var(--sp-bg-page);
  min-height: 100vh;
}

/* ===================================
 * Typography Utilities
 * =================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--sp-font-bold);
  line-height: var(--sp-line-height-tight);
  color: var(--sp-text-primary);
  margin-bottom: var(--sp-space-md);
}

h1, .h1 { font-size: var(--sp-font-size-2xl); }
h2, .h2 { font-size: var(--sp-font-size-xl); }
h3, .h3 { font-size: var(--sp-font-size-lg); }
h4, .h4 { font-size: var(--sp-font-size-md); }
h5, .h5 { font-size: var(--sp-font-size-base); }
h6, .h6 { font-size: var(--sp-font-size-sm); }

p {
  margin-bottom: var(--sp-space-md);
}

.text-muted {
  color: var(--sp-text-muted) !important;
}

.text-secondary {
  color: var(--sp-text-secondary) !important;
}

/* ===================================
 * Links
 * =================================== */
a {
  color: var(--sp-primary-dark);
  text-decoration: none;
  transition: var(--sp-transition);
}

a:hover {
  color: var(--sp-primary);
  text-decoration: underline;
}

/* ===================================
 * Utility Classes
 * =================================== */

/* Spacing Utilities */
.sp-m-0 { margin: 0 !important; }
.sp-mt-1 { margin-top: var(--sp-space-xs) !important; }
.sp-mt-2 { margin-top: var(--sp-space-sm) !important; }
.sp-mt-3 { margin-top: var(--sp-space-md) !important; }
.sp-mt-4 { margin-top: var(--sp-space-lg) !important; }
.sp-mt-5 { margin-top: var(--sp-space-xl) !important; }

.sp-mb-1 { margin-bottom: var(--sp-space-xs) !important; }
.sp-mb-2 { margin-bottom: var(--sp-space-sm) !important; }
.sp-mb-3 { margin-bottom: var(--sp-space-md) !important; }
.sp-mb-4 { margin-bottom: var(--sp-space-lg) !important; }
.sp-mb-5 { margin-bottom: var(--sp-space-xl) !important; }

.sp-p-1 { padding: var(--sp-space-xs) !important; }
.sp-p-2 { padding: var(--sp-space-sm) !important; }
.sp-p-3 { padding: var(--sp-space-md) !important; }
.sp-p-4 { padding: var(--sp-space-lg) !important; }
.sp-p-5 { padding: var(--sp-space-xl) !important; }

/* Text Utilities */
.sp-text-xs { font-size: var(--sp-font-size-xs) !important; }
.sp-text-sm { font-size: var(--sp-font-size-sm) !important; }
.sp-text-base { font-size: var(--sp-font-size-base) !important; }
.sp-text-md { font-size: var(--sp-font-size-md) !important; }
.sp-text-lg { font-size: var(--sp-font-size-lg) !important; }
.sp-text-xl { font-size: var(--sp-font-size-xl) !important; }

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