/* ============================================================
   ELECTROMÓVILES DE COLOMBIA — Colors & Type Foundations
   Asociación de usuarios Electromóviles de Colombia
   ============================================================
   Display: Anton (headlines only, BIG)
   Body:    Lato (everything else)
   Brand colors extracted from the official logo gradient
   (teal → violet → green vector functions).
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Anton";
  src: url("fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND CORE (from logo gradient) ---------- */
  --em-violet:      #3E008B;  /* anchor / primary — deep electric violet */
  --em-teal:        #00BAC7;  /* fresh / trust — electric teal */
  --em-green:       #28CE00;  /* go / eco — electric green */

  /* Tints & shades for UI use */
  --em-violet-900:  #25004F;
  --em-violet-800:  #320070;
  --em-violet-700:  #3E008B;  /* = base */
  --em-violet-600:  #5311A8;
  --em-violet-500:  #6B2BC4;
  --em-violet-200:  #D9C7F0;
  --em-violet-100:  #EFE6FA;
  --em-violet-050:  #F7F2FD;

  --em-teal-700:    #00838C;
  --em-teal-600:    #00A0AB;
  --em-teal-500:    #00BAC7;  /* = base */
  --em-teal-200:    #B3ECF0;
  --em-teal-100:    #DCF6F8;

  --em-green-700:   #1E9A00;
  --em-green-600:   #23B400;
  --em-green-500:   #28CE00;  /* = base */
  --em-green-200:   #C5F4B8;
  --em-green-100:   #E6FBE0;

  /* ---------- SIGNATURE GRADIENT ---------- */
  --em-gradient:        linear-gradient(110deg, var(--em-teal) 0%, var(--em-violet) 52%, var(--em-green) 100%);
  --em-gradient-soft:   linear-gradient(110deg, #00BAC7 0%, #5311A8 55%, #28CE00 100%); /* @kind color */
  --em-gradient-violet: linear-gradient(135deg, #5311A8 0%, #3E008B 100%); /* @kind color */

  /* ---------- NEUTRALS / INK ---------- */
  --em-ink:         #14101C;  /* near-black with a violet cast */
  --em-ink-2:       #3A3346;  /* secondary text */
  --em-ink-3:       #6E6878;  /* muted / captions */
  --em-line:        #E4E0EC;  /* hairline borders */
  --em-surface:     #FFFFFF;  /* cards / sheets */
  --em-surface-2:   #F6F4FB;  /* page background, violet-tinted off-white */
  --em-surface-3:   #ECE8F5;  /* sunken */
  --em-white:       #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --em-fg:          var(--em-ink);
  --em-fg-muted:    var(--em-ink-3);
  --em-bg:          var(--em-surface-2);
  --em-primary:     var(--em-violet);
  --em-accent:      var(--em-teal);
  --em-success:     var(--em-green-600);
  --em-warning:     #F5A300;
  --em-danger:      #E02749;
  --em-on-primary:  #FFFFFF;
  --em-focus-ring:  rgba(0, 186, 199, 0.45);

  /* ---------- TYPE TOKENS ---------- */
  --em-font-display: "Anton", "Arial Narrow", sans-serif;
  --em-font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;

  /* Display tracking — Anton is tight; open it slightly for legibility */
  --em-display-tracking: 0.005em;
  --em-display-leading:  0.92;

  /* ---------- RADII ---------- */
  --em-r-sm: 8px;
  --em-r-md: 14px;
  --em-r-lg: 22px;
  --em-r-xl: 32px;
  --em-r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --em-shadow-sm: 0 1px 2px rgba(20,16,28,0.06), 0 2px 6px rgba(20,16,28,0.05);
  --em-shadow-md: 0 6px 18px rgba(20,16,28,0.10), 0 2px 6px rgba(20,16,28,0.06);
  --em-shadow-lg: 0 18px 48px rgba(62,0,139,0.16), 0 6px 16px rgba(20,16,28,0.08);
  --em-shadow-violet: 0 14px 34px rgba(62,0,139,0.28);

  /* ---------- SPACING (4pt base) ---------- */
  --em-s-1: 4px;
  --em-s-2: 8px;
  --em-s-3: 12px;
  --em-s-4: 16px;
  --em-s-5: 24px;
  --em-s-6: 32px;
  --em-s-7: 48px;
  --em-s-8: 64px;
  --em-s-9: 96px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Anton for display ONLY. Body kept >= ~1/3 of headline size.
   ============================================================ */

/* Anton: display role ONLY — the H1/hero of a composition (and large display numerals). */
.em-display,
.em-h1 {
  font-family: var(--em-font-display);
  font-weight: 400;
  letter-spacing: var(--em-display-tracking);
  line-height: var(--em-display-leading);
  text-transform: uppercase;
  color: var(--em-ink);
  margin: 0;
}

/* H2 / H3 and every other heading: Lato (heavy). NOT Anton. */
.em-h2, .em-h3 {
  font-family: var(--em-font-body);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--em-ink);
  margin: 0;
}

/* Poster / hero scale — go BIG, attention from afar */
.em-display { font-size: clamp(64px, 12vw, 200px); }
.em-h1      { font-size: clamp(44px, 7vw, 104px); }
.em-h2      { font-size: clamp(28px, 4vw, 52px); }
.em-h3      { font-size: clamp(20px, 2.4vw, 30px); }

/* Eyebrow / kicker — small Lato caps above a headline */
.em-kicker {
  font-family: var(--em-font-body);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--em-teal-700);
  margin: 0;
}

/* Body copy */
.em-lead { font-family: var(--em-font-body); font-weight: 400; font-size: clamp(18px, 2vw, 22px); line-height: 1.5;  color: var(--em-ink-2); margin: 0; }
.em-body { font-family: var(--em-font-body); font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--em-ink-2); margin: 0; }
.em-small{ font-family: var(--em-font-body); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--em-ink-3); margin: 0; }
.em-label{ font-family: var(--em-font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--em-ink); margin: 0; }

/* Gradient text — use sparingly, for a key word in a headline */
.em-grad-text {
  background: var(--em-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}