/* ============================================================
   HUMPHRY ENERGIA — Colors & Typography Tokens
   Design System v1.0
   ============================================================ */

/* ─── Font Faces ─────────────────────────────────────────── */

@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/UBUNTU-LIGHT.TTF') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/UBUNTU-LIGHTITALIC.TTF') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/UBUNTU-REGULAR.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/UBUNTU-ITALIC.TTF') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/UBUNTU-MEDIUM.TTF') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/UBUNTU-MEDIUMITALIC.TTF') format('truetype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/UBUNTU-BOLD.TTF') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/UBUNTU-BOLDITALIC.TTF') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Aller';
  src: url('fonts/ALLER_LT.TTF') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Aller';
  src: url('fonts/ALLER_LTIT.TTF') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Aller';
  src: url('fonts/ALLER_RG.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Aller';
  src: url('fonts/ALLER_IT.TTF') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Aller';
  src: url('fonts/ALLER.TTF') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Aller';
  src: url('fonts/ALLER_BDIT.TTF') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* ─── Color Tokens ───────────────────────────────────────── */

:root {
  /* Brand core — valores oficiais do Manual de Identidade Visual */
  --color-green:          #1cce28;   /* PANTONE 802 2X | CMYK 70 0 100 0 | RGB 28 206 40 */
  --color-green-dark:     #15a81f;   /* Hover/press state for green */
  --color-green-light:    #a8f5ac;   /* Tints, highlights, backgrounds */
  --color-green-muted:    #d4fad6;   /* Subtle green tint */

  --color-charcoal:       #282821;   /* PANTONE 419 | CMYK 0 0 17 84 | RGB 41 41 34 — tom levemente quente */
  --color-charcoal-mid:   #3d3d36;   /* Secondary dark */
  --color-charcoal-light: #5c5c56;   /* Tertiary / captions */

  --color-white:          #ffffff;   /* PANTONE 000C White */
  --color-off-white:      #f5f5f5;
  --color-gray-100:       #f0f0f0;
  --color-gray-200:       #e0e0e0;
  --color-gray-300:       #c4c4c4;
  --color-gray-400:       #868686;   /* PANTONE Cool Gray 9 | CMYK 0 0 0 47 | RGB 134 134 134 */
  --color-gray-500:       #6b6b6b;
  --color-gray-600:       #4a4a4a;
  --color-gray-dark:      #282828;   /* PANTONE 426 | CMYK 0 0 0 84 — versão escala de cinza */

  /* Semantic tokens */
  --color-bg:             var(--color-white);
  --color-bg-subtle:      var(--color-gray-100);
  --color-bg-dark:        var(--color-charcoal);
  --color-bg-accent:      var(--color-green);

  --color-fg-primary:     var(--color-charcoal);
  --color-fg-secondary:   var(--color-charcoal-light);
  --color-fg-muted:       var(--color-gray-400);
  --color-fg-on-dark:     var(--color-white);
  --color-fg-on-accent:   var(--color-white);

  --color-accent:         var(--color-green);
  --color-accent-hover:   var(--color-green-dark);

  --color-border:         var(--color-gray-200);
  --color-border-strong:  var(--color-gray-300);

  /* Status */
  --color-success:        #1cce28;
  --color-warning:        #f5a623;
  --color-error:          #d0021b;
  --color-info:           #4a90e2;

  /* ─── Typography Tokens ─────────────────────────────────── */

  /* Font families — Ubuntu = primária, Aller = secundária (confirmado por imagem do manual) */
  --font-primary:   'Ubuntu', 'Helvetica Neue', sans-serif;   /* Tipografia principal — headlines, UI, nav */
  --font-secondary: 'Aller', 'Helvetica Neue', sans-serif;    /* Tipografia secundária — body copy, textos longos */
  --font-mono:      'SF Mono', 'Fira Code', monospace;        /* Code, data */

  /* Font sizes */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-md:   1.125rem;   /*  18px */
  --text-lg:   1.25rem;    /*  20px */
  --text-xl:   1.5rem;     /*  24px */
  --text-2xl:  2rem;       /*  32px */
  --text-3xl:  2.5rem;     /*  40px */
  --text-4xl:  3.5rem;     /*  56px */
  --text-5xl:  5rem;       /*  80px */

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* ─── Spacing Tokens ────────────────────────────────────── */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ─── Radii ─────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ─── Shadows ───────────────────────────────────────────── */

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.16);

  /* ─── Transitions ───────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* ─── Semantic Type Roles ────────────────────────────────── */

.h1, h1 {
  font-family: var(--font-primary);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-primary);
}
.h2, h2 {
  font-family: var(--font-primary);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-primary);
}
.h3, h3 {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-fg-primary);
}
.h4, h4 {
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-fg-primary);
}
.body-lg {
  font-family: var(--font-secondary);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg-primary);
}
.body, p {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg-primary);
}
.body-sm {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg-secondary);
}
.label {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-secondary);
}
.caption {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  color: var(--color-fg-muted);
}
code, .code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-gray-100);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-charcoal);
}