/* ==========================================================================
   DESIGN TOKENS & CSS VARIABLES - BOVINATEC BALANÇAS
   Manual de Marca: Vermelho Vibrante (#E30613), Preto (#0A0A0A) & Branco (#FFFFFF)
   Tagline: "Precisão que gera resultados"
   ========================================================================== */

:root {
  /* Brand Core Colors (Manual de Marca) */
  --brand-red: #E30613;
  --brand-red-hover: #C40510;
  --brand-red-dark: #9E000A;
  --brand-black: #0A0A0A;
  --brand-white: #FFFFFF;

  /* Surfaces & Backgrounds (Light) */
  --bg-app: #F9FAFB;
  --bg-surface: #FFFFFF;
  --bg-surface-raised: #F3F4F6;
  --bg-surface-hover: #E5E7EB;
  
  /* Sidebar (Preto Profundo com Acentos Vermelhos) */
  --bg-sidebar: #0A0A0A;
  --bg-sidebar-hover: #141414;
  --bg-sidebar-active: #E30613;

  /* Text Colors */
  --text-primary: #0A0A0A;
  --text-secondary: #4B5563;
  --text-muted: #9CA3AF;
  --text-inverse: #FFFFFF;
  --text-sidebar: #F9FAFB;
  --text-sidebar-muted: #9CA3AF;

  /* Primary Accent: Vermelho Bovinatec */
  --primary: #E30613;
  --primary-hover: #C40510;
  --primary-light: #FEF2F2;
  --primary-border: #FECACA;
  --primary-glow: rgba(227, 6, 19, 0.25);

  /* Secondary Accent */
  --secondary: #1E1E1E;
  --secondary-hover: #0A0A0A;
  --secondary-light: #F3F4F6;
  --secondary-border: #E5E7EB;

  /* Status Colors */
  --success: #16A34A;
  --success-light: #F0FDF4;
  --success-border: #BBF7D0;

  --warning: #D97706;
  --warning-light: #FFFBEB;
  --warning-border: #FDE68A;

  --danger: #E30613;
  --danger-light: #FEF2F2;
  --danger-border: #FECACA;

  --info: #2563EB;
  --info-light: #EFF6FF;
  --info-border: #BFDBFE;

  --purple: #7C3AED;
  --purple-light: #F5F3FF;
  --purple-border: #DDD6FE;

  /* Borders & Dividers */
  --border-light: #E5E7EB;
  --border-medium: #D1D5DB;
  --border-strong: #9CA3AF;

  /* Typography */
  --font-brand: 'Kanit', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

  /* Font Sizes */
  --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 */
  --text-4xl: 2.25rem;   /* 36px */

  /* Spacing */
  --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;

  /* Border Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);

  /* Layout Dimensions */
  --sidebar-width: 260px;
  --header-height: 64px;
  --max-content-width: 1440px;

  /* Transitions */
  --transition-fast: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-slow: 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Dark Mode Tokens (Applied by class .dark, attribute [data-theme="dark"], or OS preference) */
:root.dark,
:root[data-theme="dark"],
body.dark {
  /* AMOLED Pure Black Backgrounds */
  --bg-app: #0A0A0A;
  --bg-surface: #141414;
  --bg-surface-raised: #1E1E1E;
  --bg-surface-hover: #262626;
  
  /* Sidebar */
  --bg-sidebar: #0A0A0A;
  --bg-sidebar-hover: #141414;
  --bg-sidebar-active: #E30613;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #A1A1AA;
  --text-muted: #71717A;
  
  /* Secondary surface / border */
  --secondary: #1E1E1E;
  --secondary-hover: #2A2A2A;
  --secondary-light: #1A1A1A;
  --secondary-border: #2A2A2A;

  /* Borders */
  --border-light: #222222;
  --border-medium: #2E2E2E;
  --border-strong: #404040;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.5);

  /* Status & Accent Colors in Dark Mode */
  --primary: #E30613;
  --primary-light: rgba(227, 6, 19, 0.18);
  --primary-border: rgba(227, 6, 19, 0.4);

  --secondary: #60A5FA;
  --secondary-light: rgba(96, 165, 250, 0.15);
  --secondary-border: rgba(96, 165, 250, 0.3);

  --success: #34D399;
  --success-light: rgba(52, 211, 153, 0.15);
  --success-border: rgba(52, 211, 153, 0.3);

  --warning: #FBBF24;
  --warning-light: rgba(251, 191, 36, 0.15);
  --warning-border: rgba(251, 191, 36, 0.3);

  --danger: #F87171;
  --danger-light: rgba(248, 113, 113, 0.15);
  --danger-border: rgba(248, 113, 113, 0.3);

  --info: #60A5FA;
  --info-light: rgba(96, 165, 250, 0.15);
  --info-border: rgba(96, 165, 250, 0.3);

  --purple: #C084FC;
  --purple-light: rgba(192, 132, 252, 0.15);
  --purple-border: rgba(192, 132, 252, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --bg-app: #0A0A0A;
    --bg-surface: #141414;
    --bg-surface-raised: #1E1E1E;
    --bg-surface-hover: #262626;
    --bg-sidebar: #0A0A0A;
    --bg-sidebar-hover: #141414;
    --bg-sidebar-active: #E30613;
    --text-primary: #FFFFFF;
    --text-secondary: #A1A1AA;
    --text-muted: #71717A;
    --border-light: #222222;
    --border-medium: #2E2E2E;
    --border-strong: #404040;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.5);

    --primary: #E30613;
    --primary-light: rgba(227, 6, 19, 0.18);
    --primary-border: rgba(227, 6, 19, 0.4);

    --secondary: #60A5FA;
    --secondary-light: rgba(96, 165, 250, 0.15);
    --secondary-border: rgba(96, 165, 250, 0.3);

    --success: #34D399;
    --success-light: rgba(52, 211, 153, 0.15);
    --success-border: rgba(52, 211, 153, 0.3);

    --warning: #FBBF24;
    --warning-light: rgba(251, 191, 36, 0.15);
    --warning-border: rgba(251, 191, 36, 0.3);

    --danger: #F87171;
    --danger-light: rgba(248, 113, 113, 0.15);
    --danger-border: rgba(248, 113, 113, 0.3);

    --info: #60A5FA;
    --info-light: rgba(96, 165, 250, 0.15);
    --info-border: rgba(96, 165, 250, 0.3);

    --purple: #C084FC;
    --purple-light: rgba(192, 132, 252, 0.15);
    --purple-border: rgba(192, 132, 252, 0.3);
  }
}