/* ============================================================
   GRUPO EMTEL — Design Tokens
   Source: Manual de Marca 2025 + Noto Sans font family
   ============================================================ */

/* -----------------------------------------------------------
   FONTS
   ----------------------------------------------------------- */
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-Thin.ttf'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-ExtraLight.ttf'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-Light.ttf'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-Regular.ttf'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-Italic.ttf'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-Medium.ttf'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-SemiBold.ttf'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-Bold.ttf'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-BoldItalic.ttf'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-ExtraBold.ttf'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-Black.ttf'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-BlackItalic.ttf'); font-weight: 900; font-style: italic; }
@font-face { font-family: 'Noto Sans'; src: url('fonts/NotoSans-LightItalic.ttf'); font-weight: 300; font-style: italic; }

/* -----------------------------------------------------------
   BASE COLOR TOKENS
   ----------------------------------------------------------- */
:root {
  /* Blues — institutional base */
  --color-blue-primary:   #1A56AB;  /* PMS 300 — predominant */
  --color-blue-dark:      #213858;  /* ESG and institutional contrast */
  --color-blue-mid:       #3668B1;  /* Azul médio vibrante */
  --color-blue-light:     #589DEB;  /* Highlights, tonal steps, grafismo outline */
  --color-blue-wash:      #DBE9F6;  /* Soft backgrounds, breathing room */

  /* Red / Pink — accent (use only on diamond symbol) */
  --color-red:            #FF153C;  /* PMS 1788 — diamond only */
  --color-pink-light:     #F7E6ED;  /* Soft alternative bg */
  --color-pink-mid:       #F7C6D1;  /* Support */

  /* ESG Greens — sustainability comms only */
  --color-green-esg:      #30E322;
  --color-green-mid:      #98DB7C;
  --color-green-wash:     #DCFFCF;

  /* Neutrals */
  --color-gray-light:     #F2F4F8;  /* Neutral background */
  --color-gray-mid:       #D0D0CF;  /* Dividers, supports */
  --color-gray-text:      #6D6D6D;  /* Body text on light bg */
  --color-white:          #FFFFFF;
  --color-black:          #0A0A0A;

  /* -----------------------------------------------------------
     SEMANTIC COLOR TOKENS
     ----------------------------------------------------------- */
  --bg-primary:           var(--color-blue-primary);
  --bg-secondary:         var(--color-blue-dark);
  --bg-light:             var(--color-gray-light);
  --bg-white:             var(--color-white);
  --bg-wash:              var(--color-blue-wash);

  --fg-on-dark:           var(--color-white);
  --fg-on-light:          var(--color-blue-primary);
  --fg-body:              var(--color-gray-text);
  --fg-heading:           var(--color-blue-primary);
  --fg-muted:             var(--color-gray-mid);

  --border-default:       var(--color-gray-mid);
  --border-brand:         var(--color-blue-primary);

  --accent-primary:       var(--color-blue-primary);
  --accent-light:         var(--color-blue-light);

  /* -----------------------------------------------------------
     GRADIENTS (Official — Manual de Marca 2025)
     ----------------------------------------------------------- */
  /* Preferencial: Azul → Vermelho */
  --gradient-brand:       linear-gradient(135deg, #1A56AB 10%, #FF153C 100%);
  /* Escuro: Azul escuro → Vermelho */
  --gradient-dark:        linear-gradient(135deg, #213858 10%, #FF153C 100%);
  /* ESG: Azul → Verde */
  --gradient-esg:         linear-gradient(135deg, #1A56AB 10%, #30E322 100%);
  /* Azul contínuo */
  --gradient-blue:        linear-gradient(135deg, #1A56AB 10%, #589DEB 100%);
  /* Subtle institutional (safe for backgrounds) */
  --gradient-subtle:      linear-gradient(180deg, #1A56AB 0%, #215080 100%);

  /* -----------------------------------------------------------
     TYPOGRAPHY TOKENS
     ----------------------------------------------------------- */
  --font-family:          'Noto Sans', sans-serif;

  /* Size scale — rebalanced Jan 2025
     Ratio ~1.25x per step; H1 reduced to avoid abrupt jump from H2;
     H2 elevated for stronger presence; Lead distinct from Body by size + weight */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    19px;   /* Lead — distinct from body (16px) by 3px + weight */
  --text-lg:    22px;   /* H4 */
  --text-xl:    28px;   /* H3 */
  --text-2xl:   36px;   /* H2 — elevated for presence */
  --text-3xl:   44px;   /* H1 — reduced to close gap with H2 */
  --text-4xl:   52px;   /* Display / hero only */
  --text-5xl:   64px;   /* Oversize display */
  --text-6xl:   80px;   /* Reserved — decorative only */

  /* Weight aliases */
  --weight-thin:       100;
  --weight-extralight: 200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;
  --weight-black:      900;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* -----------------------------------------------------------
     SPACING SCALE
     ----------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* -----------------------------------------------------------
     BORDER RADIUS
     ----------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------
     SHADOWS
     ----------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(26,86,171,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(26,86,171,0.12), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 24px rgba(26,86,171,0.15), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-xl:  0 16px 40px rgba(26,86,171,0.18), 0 6px 12px rgba(0,0,0,0.10);

  /* -----------------------------------------------------------
     TRANSITIONS
     ----------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}

/* -----------------------------------------------------------
   SEMANTIC TYPE STYLES
   ----------------------------------------------------------- */
/* -----------------------------------------------------------
   SEMANTIC TYPE STYLES
   Rebalanced: tighter H1→H2 ratio, elevated H2 presence,
   Lead differentiated from Body via size + weight + spacing
   ----------------------------------------------------------- */

/* H1 — 44px Black. Reduced from 52px to close gap with H2. */
.emtel-h1 {
  font-family: var(--font-family);
  font-size: var(--text-3xl);        /* 44px */
  font-weight: var(--weight-black);  /* 900 */
  line-height: var(--leading-tight); /* 1.15 */
  letter-spacing: var(--tracking-tight);
  color: var(--fg-heading);
}

/* H2 — 36px ExtraBold. Elevated from 32px for stronger presence. */
.emtel-h2 {
  font-family: var(--font-family);
  font-size: var(--text-2xl);           /* 36px */
  font-weight: var(--weight-extrabold); /* 800 */
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--fg-heading);
}

/* H3 — 28px Bold. Clear step below H2. */
.emtel-h3 {
  font-family: var(--font-family);
  font-size: var(--text-xl);     /* 28px */
  font-weight: var(--weight-bold); /* 700 */
  line-height: var(--leading-snug);
  color: var(--fg-heading);
}

/* H4 — 22px SemiBold. Compact sub-section level. */
.emtel-h4 {
  font-family: var(--font-family);
  font-size: var(--text-lg);         /* 22px */
  font-weight: var(--weight-semibold); /* 600 */
  line-height: var(--leading-snug);
  color: var(--fg-heading);
}

/* Lead — 19px Light. Distinct from Body: +3px size, lighter weight, relaxed leading. */
.emtel-lead {
  font-family: var(--font-family);
  font-size: var(--text-md);         /* 19px */
  font-weight: var(--weight-light);  /* 300 */
  line-height: var(--leading-relaxed); /* 1.65 */
  letter-spacing: 0.005em;
  color: var(--fg-body);
}

/* Body — 16px Regular. Foundation reading size. */
.emtel-body {
  font-family: var(--font-family);
  font-size: var(--text-base);       /* 16px */
  font-weight: var(--weight-regular); /* 400 */
  line-height: var(--leading-normal); /* 1.5 */
  color: var(--fg-body);
}

/* Caption — 14px Medium. Supporting info, metadata. */
.emtel-caption {
  font-family: var(--font-family);
  font-size: var(--text-sm);         /* 14px */
  font-weight: var(--weight-medium); /* 500 */
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-body);
}

/* Label — 12px SemiBold Uppercase. Tags, eyebrows, badges. */
.emtel-label {
  font-family: var(--font-family);
  font-size: var(--text-xs);          /* 12px */
  font-weight: var(--weight-semibold); /* 600 */
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-body);
}

/* -----------------------------------------------------------
   GRADIENT USAGE RULES
   Gradients are NOT default backgrounds. Restricted to:
   — Primary CTA buttons (gradient-brand)
   — CTA band / conversion sections (gradient-brand or gradient-dark)
   — Hero accent moments (max 1 per page)
   NEVER behind: long reading areas, cards, navigation, forms.
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   GRAFISMO SYSTEM — 3 defined roles
   ----------------------------------------------------------- */
/* Role 1 — Background (fundo): opacity 0.08–0.15, full-size, cropped at edge */
/* Role 2 — Directional (direcional): opacity 0.20–0.35, positioned to guide eye */
/* Role 3 — Structural (estrutural): opacity 0.50–0.70, section boundary anchor */