/* ============================================================================
   MI Electric Brasil — Design System Tokens (Dashboard edition)
   Source: MANUAL DE IDENTIDADE VISUAL MI ELECTRIC BRASIL (REV 02)
   ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  /* ---- Primary colors (brand manual page 9) ---- */
  --mi-red:            #E83F43;
  --mi-navy:           #0F1724;
  --mi-red-deep:       #AE3033;
  --mi-coral:          #EC6668;
  --mi-gray:           #878787;

  /* ---- Derived neutrals ---- */
  --mi-ink:            #0F1724;
  --mi-ink-2:          #1B2535;
  --mi-ink-3:          #2C3A4F;
  --mi-gray-1:         #4A5260;
  --mi-gray-2:         #878787;
  --mi-gray-3:         #BFC3C8;
  --mi-gray-4:         #E5E6E8;
  --mi-paper:          #F4F5F7;
  --mi-white:          #FFFFFF;

  /* ---- Red scale ---- */
  --mi-red-50:         #FDECEC;
  --mi-red-100:        #FBD3D4;
  --mi-red-200:        #F69FA1;
  --mi-red-300:        #F17072;
  --mi-red-400:        #EC6668;
  --mi-red-500:        #E83F43;
  --mi-red-600:        #D03338;
  --mi-red-700:        #AE3033;
  --mi-red-800:        #862528;
  --mi-red-900:        #5A1819;

  /* ---- Semantic roles ---- */
  --bg:                var(--mi-white);
  --bg-elevated:       var(--mi-white);
  --bg-subtle:         var(--mi-paper);
  --bg-inverse:        var(--mi-navy);
  --fg:                var(--mi-navy);
  --fg-muted:          var(--mi-gray-1);
  --fg-subtle:         var(--mi-gray-2);
  --fg-on-red:         var(--mi-white);
  --border:            var(--mi-gray-4);
  --border-strong:     var(--mi-gray-3);
  --accent:            var(--mi-red);
  --accent-hover:      var(--mi-red-600);
  --accent-press:      var(--mi-red-700);
  --success:           #1F9D55;
  --warning:           #E1A23A;
  --danger:            var(--mi-red);
  --info:              #2F6FB3;

  /* ---- Typography ---- */
  --font-sans:         "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fw-light:          300;
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-bold:           700;
  --fw-extrabold:      800;
  --fw-black:          900;
  --ls-wide:           0.20em;
  --ls-medium:         0.08em;
  --ls-tight:          -0.01em;

  /* ---- Spacing (4px base) ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;

  /* ---- Radii ---- */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    20px;
  --r-pill:  999px;
  --r-circle: 50%;

  /* ---- Shadows (navy-tinted, never black) ---- */
  --shadow-1: 0 1px 2px rgba(15, 23, 36, 0.06);
  --shadow-2: 0 2px 6px rgba(15, 23, 36, 0.08), 0 1px 2px rgba(15, 23, 36, 0.04);
  --shadow-3: 0 6px 16px rgba(15, 23, 36, 0.10), 0 2px 4px rgba(15, 23, 36, 0.05);
  --shadow-4: 0 12px 28px rgba(15, 23, 36, 0.14), 0 4px 8px rgba(15, 23, 36, 0.06);
  --shadow-red: 0 8px 24px rgba(232, 63, 67, 0.28);

  /* ---- Motion ---- */
  --ease-standard:  cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-emphasis:  cubic-bezier(0.2, 0.0, 0, 1);
  --ease-exit:      cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       320ms;

  /* ---- Dashboard product tokens from the MI Electric DS bundle ---- */
  --wrap:            1280px;
  --card-shadow:     0 1px 0 rgba(15,23,36,.04), 0 1px 3px rgba(15,23,36,.05);
  --card-shadow-hover: 0 2px 8px rgba(15,23,36,.08);
  --t-fast:          var(--dur-fast);
  --t-base:          var(--dur-base);
  --t-slow:          var(--dur-slow);

  /* ---- Legacy aliases (backward compat for inline styles) ---- */
  --red:          var(--mi-red);
  --red-600:      var(--mi-red-600);
  --red-700:      var(--mi-red-700);
  --red-50:       var(--mi-red-50);
  --navy:         var(--mi-navy);
  --ink-2:        var(--mi-ink-2);
  --ink-3:        var(--mi-ink-3);
  --gray-1:       var(--mi-gray-1);
  --gray-2:       var(--mi-gray-2);
  --gray-3:       var(--mi-gray-3);
  --gray-4:       var(--mi-gray-4);
  --gray-5:       var(--mi-paper);
  --paper:        var(--mi-paper);
  --white:        var(--mi-white);
  --ok:           var(--success);
  --warn:         var(--warning);
  --bad:          var(--danger);
  --ease:         var(--ease-standard);
  --font:         var(--font-sans);
}

/* ---- Lightning-bolt accent rule ---- */
.mi-accent-rule {
  border: 0;
  height: 4px;
  background: var(--mi-red);
  position: relative;
  margin: var(--sp-5) 0;
}
.mi-accent-rule::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 100%;
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent var(--mi-red);
}

/* ---- Eyebrow ---- */
.mi-eyebrow {
  font-weight: var(--fw-black);
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--mi-red);
}