/*
 * Verdus — Design Tokens
 * Fonte: Manual de Marca 2023
 *
 * Regra de ouro: nao alterar cores, distorcer logo, usar fundos de tom medio com logo bi-color.
 */

:root {
  /* Paleta institucional */
  --verdus-bleu:    #004976;
  --verdus-viridis: #58B947;
  --verdus-citron:  #C4D600;
  --verdus-gris:    #54585A;
  --verdus-dark:    #1C3052;
  --verdus-teal:    #005E5D;
  --verdus-sable:   #BFBB98;
  --verdus-white:   #FFFFFF;

  /* Neutros de suporte */
  --neutral-50:     #F8F9FA;
  --neutral-100:    #F1F3F5;
  --neutral-200:    #E9ECEF;
  --neutral-300:    #DEE2E6;
  --neutral-400:    #CED4DA;
  --neutral-500:    #ADB5BD;
  --neutral-700:    #495057;
  --neutral-900:    #212529;

  /* Feedback semantico (derivados da paleta) */
  --color-success: var(--verdus-viridis);
  --color-danger:  #C73E3E;
  --color-warning: #E8A600;
  --color-info:    var(--verdus-bleu);

  /* Tipografia */
  --font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Arial Nova', 'Arial', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  /* Escala tipografica */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  1.875rem;  /* 30px */
  --fs-4xl:  2.25rem;   /* 36px */
  --fs-5xl:  3rem;      /* 48px */

  /* Espacamento (base 4px) */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Layout */
  --radius-sm: 2px;   /* base quadrada - regra de icones/elementos Verdus */
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 2px rgba(28, 48, 82, 0.08);
  --shadow-md: 0 4px 12px rgba(28, 48, 82, 0.10);
  --shadow-lg: 0 12px 32px rgba(28, 48, 82, 0.14);

  /* Container */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* Transicoes */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* Poppins do Google Fonts — alternativa: hospedar localmente para LGPD/CSP estrito */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* Reset minimalista */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--verdus-gris);
  background: var(--neutral-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--verdus-bleu);
  margin: 0 0 var(--sp-4);
  line-height: 1.2;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }

a { color: var(--verdus-bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* Utilitarios de fundo (logo regra) */
.bg-light { background: var(--verdus-white); color: var(--verdus-gris); }
.bg-dark  { background: var(--verdus-dark);  color: var(--verdus-white); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--verdus-citron); }

/* Botoes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--verdus-bleu);
  color: var(--verdus-white);
}
.btn-primary:hover { background: #003a5e; }

.btn-success {
  background: var(--verdus-viridis);
  color: var(--verdus-white);
}
.btn-success:hover { background: #489a39; }

.btn-cta-dark {
  background: var(--verdus-citron);
  color: var(--verdus-dark);
}
.btn-cta-dark:hover { background: #aebd00; }

.btn-outline {
  background: transparent;
  color: var(--verdus-bleu);
  border-color: var(--verdus-bleu);
}
.btn-outline:hover { background: var(--verdus-bleu); color: var(--verdus-white); }

/* Cards */
.card {
  background: var(--verdus-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* Acessibilidade: foco visivel */
:focus-visible {
  outline: 2px solid var(--verdus-viridis);
  outline-offset: 2px;
}